[英]Filtering array in angular.js
我有一个对象数组:
var arr = [{id:1, name: 'frank', type: 'great'}, {id:2, name: 'john', type: 'good'}, {id:3, name: 'mark', type: 'great'}, {id:4, name: 'mary', type: 'bad'}];
在某些方面,我需要打印3个不同的html元素。 在每个元素中,将有一个具有相同“类型”的名称列表。
我可以进行3次不同的迭代,我会查看所有项目。 但我想知道是否有更好的方法。 我带来的最好的是每次迭代“过滤”这个数组。 即使我仍然会循环3次,也许它是一个更好的方法来做到这一点,因为你只需要通过你真正感兴趣的数组中的元素。
我不确定如何过滤这个。 我正在使用angular.js。 如果没有,我可以使用普通的JavaScript。 或者有更好的解决方案吗?
*****编辑*****
感谢duffy对过滤器功能的建议。 我可能需要太多,但问题是:
有一个.html现在包含这样的div:
<div ng-repeat="person in peopleContainer.get_people()">
peopleContainer是services.js文件中的工厂。 这个工厂函数包含所有人的数组和添加一个人的函数/返回所有人的数组。
现在(忘记过滤)上面的ng-repeat指令似乎不起作用。 当我添加一个新人时,我可以看到此人已被添加到数组中。 但是在div容器中没有任何反应。 没有重复ng重复。 这可能是因为带有人的数组位于service.js文件中吗? 如果是:有办法解决这个问题吗?
正如@ duffy356所说,你可以使用过滤器。
编辑在控制器中解析您的承诺:)(已更新代码段以解析承诺)
var app = angular.module('my-app', []); app.controller('MainCtrl', function($scope, $q, $timeout) { $scope.arr = []; $scope.get_people = function(){ var results = [{id:1, name: 'frank', type: 'great'}, {id:2, name: 'john', type: 'good'}, {id:3, name: 'mark', type: 'great'}, {id:4, name: 'mary', type: 'bad'}]; var deferred = $q.defer(); $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false); return deferred.promise; } $scope.get_people().then(function(result) { $scope.arr = result;}); });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="my-app" ng-controller="MainCtrl"> <div ng-repeat="a in arr track by $index"> {{ a.name }} {{ a.type }} <div style="margin:10px" ng-repeat="aa in arr | filter : { type: a.type } track by $index"> {{ aa.name }} <b>{{ aa.type }}</b> </div> </div> </body>
不要在ng-repeat
执行peopleContainer.get_people()
,在控制器中执行此操作并将结果添加到范围变量,然后在ng-repeat
使用它。
控制器:
$scope.people = peopleContainer.get_people();
HTML:
<div ng-repeat="person in people">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.