use*_*187 435 javascript angularjs
我有一个包含许多对象(JSON格式)的数据数组.以下可以假设为此数组的内容:
var data = [
{
"name": "Jim",
"age" : 25
},
{
"name": "Jerry",
"age": 27
}
];
现在,我将这些细节显示为:
<div ng-repeat="person in data | filter: query">
</div
这里,查询被建模为输入字段,其中用户可以限制所显示的数据.
现在,我有另一个位置,我在其中显示当前显示的人/人数,即 Showing {{data.length}} Persons
我想要做的是,当用户搜索某个人并根据查询过滤显示的数据时,Showing...persons还会更改当前显示的人的值.但它没有发生.它始终显示数据中的总人数而不是过滤数据 - 如何获取过滤数据的计数？
Wum*_*mms 743
适用于Angular 1.3+(@Tom积分)
使用别名表达式(文档:Angular 1.3.0:ngRepeat,向下滚动到Arguments部分):
<div ng-repeat="person in data | filter:query as filtered">
</div>
对于1.3之前的Angular
将结果分配给新变量(例如filtered)并访问它:
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
显示结果数量:
Showing {{filtered.length}} Persons
举一个类似的例子.积分去Pawel Kozlowski
Tom*_*Tom 332
为了完整性,除了先前的答案(执行控制器内可见人员的计算)之外,您还可以在HTML模板中执行该计算,如下例所示.
假设您的人员列表处于data变量状态,并且您使用query模型过滤人员,则以下代码将适用于您:
<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>
{{data.length}} - 打印总人数{{(data|filter:query).length}} - 打印过滤的人数请注意,如果您只想在页面中使用过滤数据一次,此解决方案可以正常工作.但是,如果您多次使用过滤数据,例如呈现项目并显示已过滤列表的长度,我建议使用AngularJS 1.3+的别名表达式(如下所述)或@Wumms为1.3之前的AngularJS版本提出的解决方案.
Angular 1.3中的新功能
AngularJS创建者也注意到了这个问题,并且在版本1.3(beta 17)中他们添加了"别名"表达式,该表达式将在应用过滤器之后存储转发器的中间结果,例如
<div ng-repeat="person in data | filter:query as results">
<!-- template ... -->
</div>
<p>Number of visible people: {{results.length}}</p>
该别名表达式将防止多重滤波执行问题.
我希望这会有所帮助.
ion*_*cho 41
如果你有最简单的方法
<div ng-repeat="person in data | filter: query"></div>
过滤的数据长度
<div>{{ (data | filter: query).length }}</div>
Jos*_*ler 35
ngRepeat在应用过滤器时会创建数组的副本,因此您无法使用源数组仅引用过滤后的元素.
在您的情况下,使用该$filter服务在控制器内应用过滤器可能更好:
function MainCtrl( $scope, filterFilter ) {
// ...
$scope.filteredData = myNormalData;
$scope.$watch( 'myInputModel', function ( val ) {
$scope.filteredData = filterFilter( myNormalData, val );
});
// ...
}
然后filteredData在视图中使用该属性.这是一个有效的Plunker:http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx？p = preview
Wel*_*eTo 29
从AngularJS 1.3开始,您可以使用别名:
item in items | filter:x as results
在某个地方:
<span>Total {{results.length}} result(s).</span>
来自docs:
您还可以提供可选的别名表达式,然后在应用过滤器后存储转发器的中间结果.通常,这用于在转发器上的筛选器处于活动状态时呈现特殊消息,但筛选结果集为空.
例如:项目中的项目 filter:x as results将重复项的片段存储为结果,但仅在通过过滤器处理了项之后.
Jer*_*eir 24
注意,您可以通过对过滤器进行分组来存储多个级别的结果
all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>
这是一个演示小提琴
Mak*_*sym 13
这是工作示例See on Plunker
<body ng-controller="MainCtrl">
<input ng-model="search" type="text">
<br>
Showing {{data.length}} Persons; <br>
Filtered {{counted}}
<ul>
<li ng-repeat="person in data | filter:search">
{{person.name}}
</li>
</ul>
</body>
<script>
var app = angular.module('angularjs-starter', [])
app.controller('MainCtrl', function($scope, $filter) {
$scope.data = [
{
"name": "Jim", "age" : 21
}, {
"name": "Jerry", "age": 26
}, {
"name": "Alex", "age" : 25
}, {
"name": "Max", "age": 22
}
];
$scope.counted = $scope.data.length;
$scope.$watch("search", function(query){
$scope.counted = $filter("filter")($scope.data, query).length;
});
});
你可以用两种方式做到这一点.在模板和控制器中.在模板中,您可以将过滤后的数组设置为另一个变量,然后根据需要使用它.这是怎么做的:
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
....
<span>{{ usersList.length | number }}</span>
如果需要示例,请参阅AngularJs过滤计数示例/演示
| 归档时间： |
|
| 查看次数： |
392246 次 |
| 最近记录： |