使用带有 angular 的按钮过滤 ng-repeat
filter an ng-repeat using buttons with angular
我想过滤一个 ng-repeat,使用按钮(稍后我将使用输入),当我点击一个过滤器按钮时,一切都消失了,当我点击没有过滤器的按钮时,一切都保持隐藏。
我在这个 fiddle 中复制了部分代码:http://jsfiddle.net/3g3L0ca8/
<div ng-app>
<a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="myFilter = {date: 1900-12-31}">Select by date</a>
<a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="myFilter = null">All the events</a>
<div ng-controller="Test">
<div class="events-right-bar scrollable-content" id='hideshow' value='hide/show'>
<section ng-repeat="event in events | orderBy:'date' | filter:myFilter">
<div class="panel panel-default single-event">
<div class="panel-heading">
<h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dialogTestDialog{{$index}}">{{event.title}}</button>
<em class="pull-right">Created by user: {{event.username}}</em>
</h3>
</div>
<div class="panel-body">
Description:<br>{{event.description}} <br>
<em class="pull-right">{{event.date | date:'dd-MM-yyyy' }} - {{event.hour | date:"H:mm"}}</em> <br>
{{event.duration}} minutes <br>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
在 fiddle 中,当我按日期筛选时,所有内容也都消失了,我认为它可以按日期格式,但我不是 sure.But 在 fiddle 中当我点击无过滤器按钮时,一切再次出现,在我的项目中,无过滤器按钮没有任何作用。
我解决了通过 "myFilter:''" 更改 "myFilter:null" 的无过滤器按钮
现在只需要解决日期问题,一直以为是格式问题
编辑:如我所料,这是一个格式错误。即使日期显示为 dd-MM-yyy,似乎在过滤器中也必须写入 yyyy-MM-dd。所以我尝试的日期是 27-11-2015 是错误的,它可以写成 2015-11-27
现在可以了
我想过滤一个 ng-repeat,使用按钮(稍后我将使用输入),当我点击一个过滤器按钮时,一切都消失了,当我点击没有过滤器的按钮时,一切都保持隐藏。
我在这个 fiddle 中复制了部分代码:http://jsfiddle.net/3g3L0ca8/
<div ng-app>
<a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="myFilter = {date: 1900-12-31}">Select by date</a>
<a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="myFilter = null">All the events</a>
<div ng-controller="Test">
<div class="events-right-bar scrollable-content" id='hideshow' value='hide/show'>
<section ng-repeat="event in events | orderBy:'date' | filter:myFilter">
<div class="panel panel-default single-event">
<div class="panel-heading">
<h3>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#dialogTestDialog{{$index}}">{{event.title}}</button>
<em class="pull-right">Created by user: {{event.username}}</em>
</h3>
</div>
<div class="panel-body">
Description:<br>{{event.description}} <br>
<em class="pull-right">{{event.date | date:'dd-MM-yyyy' }} - {{event.hour | date:"H:mm"}}</em> <br>
{{event.duration}} minutes <br>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
在 fiddle 中,当我按日期筛选时,所有内容也都消失了,我认为它可以按日期格式,但我不是 sure.But 在 fiddle 中当我点击无过滤器按钮时,一切再次出现,在我的项目中,无过滤器按钮没有任何作用。
我解决了通过 "myFilter:''" 更改 "myFilter:null" 的无过滤器按钮 现在只需要解决日期问题,一直以为是格式问题
编辑:如我所料,这是一个格式错误。即使日期显示为 dd-MM-yyy,似乎在过滤器中也必须写入 yyyy-MM-dd。所以我尝试的日期是 27-11-2015 是错误的,它可以写成 2015-11-27
现在可以了