如何显示过滤ng的长度
我有一个数据数组,其中包含许多对象(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 {{data.length}} Persons
我想要做的是当用户搜索一个人并且显示的数据根据查询过滤时, Showing...persons
也会更改当前Showing...persons
的价值。 但它没有发生。 它总是显示数据中的总人数而不是过滤后的数据 - 如何获取过滤数据的数量?
对于Angular 1.3+ (信用额度@Tom)
使用别名表达式(Docs: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
为了完整起见,除了以前的答案(执行控制器内可见人员的计算),您还可以在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(测试版17)中,他们添加了“别名”表达式,它将在应用过滤器后存储中继器的中间结果,例如
<div ng-repeat="person in data | filter:query as results">
<!-- template ... -->
</div>
<p>Number of visible people: {{results.length}}</p>
别名表达式将防止多个过滤器执行问题。
我希望这会有所帮助。
ngRepeat在应用过滤器时创建数组的副本,因此您不能使用源数组仅引用已过滤的元素。
在你的情况下,使用$filter
服务在你的控制器内应用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