过滤NG重复,但保留初始长度/计数
filter ng-repeat yet preserve initial length / count
我一直在扩展angularjs网站上的一个演示,以添加更多的动态过滤。
我有 3 个过滤器:
-
通过输入字段查询筛选器。
-
通过选择字段进行订单筛选。
-
要通过选择字段显示的结果数。
虽然所有 3 个都独立工作,但当第 1 个被归档时,我在处理第 3 个时遇到了麻烦。我希望第三个选择字段中的下拉选项保留初始计数。
我有以下小提琴。在输入字段中输入单词"dell"会给出 2 个工作正常的结果。
这将在第三个过滤器上提供以下选项。"全部"、"1"、"2"。但是,当我尝试在第三个过滤器上选择"1"(仅显示一个结果)时,一切都消失了。
首先,我不知道为什么会发生这种情况 - 因为当您搜索"moto"一词时,此功能可以正常工作。其次,最好在第三个过滤器中保留初始结果数。
当我在第一个字段中输入"moto"时,它会显示 10 个结果,以下数字仍显示在第三个字段中。"全部"、"1"、"2"、"3"、"4"、"5"、"6"、"7"、"8"、"9"、"10"。
我想要的是,当单击第 3 字段中的上述任何数字时,它们仍然保留。例如,当前当我单击"3"时,仅显示以下内容"全部","1","2","3"。
法典。
<div class="form-group">
<label for="search">Search:</label>
<input id="search" ng-model="query">
</div>
<div class="form-group">
<label for="sort">Sort by:</label>
<select id="sort" ng-model="phoneCtrl.orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="-age">Oldest</option>
</select>
</div>
<div class="form-group">
<label for="show">Show:</label>
<select id="show" ng-model="phoneCtrl.limitProp">
<option value="">All</option>
<option ng-repeat="phone in filtered" value="{{$index+1}}">{{$index+1}}</option>
</select>
</div>
<ul class="phones list-unstyled">
<li ng-repeat="phone in filtered = (phoneCtrl.phones | limitTo : phoneCtrl.limitProp : begin | filter:query | orderBy:phoneCtrl.orderProp)">
<article class="phone">
<h2 class="h3">{{phone.name}}</h2>
<p>{{phone.snippet}}</p>
</article>
</li>
</ul>
为了使第三个过滤器限制为多个项目,您需要重复phoneCtrl.phones
而不是filtered
,因为filtered
对象会更改,但phoneCtrl.phones
不会。
<option ng-repeat="phone in phoneCtrl.phones" value="{{$index+1}}">{{$index+1}}</option>
若要使筛选器协同工作,请将limitTo
筛选器移到filtered
对象定义之外,否则筛选器将仅查看n
数量的电话。
<li ng-repeat="phone in filtered = (phoneCtrl.phones | filter:query | orderBy:phoneCtrl.orderProp) | limitTo : phoneCtrl.limitProp : begin ">
更新的小提琴
- 分派点击事件并保留击键修饰符
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 提交后保留下拉选择的值
- 对id以某个字符串开头的元素进行计数
- 刷新后保留对网页的更改
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- Flash Uploadify在调用我的MVC控制器时没有保留会话/授权
- 字母计数:返回重复字母数最多的第一个单词
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 使用递归属性迭代保留属性结构
- Jquery html() 和保留元素名称
- 如何将字符串拆分为字符,但在javascript中保留空格
- 离开页面导航后保留文本区域内容
- 如何在使用JavaScript或jQuery刷新父页面后保留iframe-src
- 为什么可以't我在JavaScript中获取导航器对象的属性计数
- 添加到购物车和移除计数的产品丢失,而移除露天市场中的项目
- JavaScript:从对象数组中获取唯一值及其计数
- Javascript和RegEx:拆分并保留分隔符
- 过滤NG重复,但保留初始长度/计数
- JQuery:将项目添加到列表并保留项目计数