过滤angular.js中的数组

Question

I have an array of objects: 我有一个对象数组：

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'}];

At some points, I need to print 3 different html-elements. 在某些方面，我需要打印3个不同的html元素。 In each one of this elements there will be a list of names that have the same "type". 在每个元素中，将有一个具有相同“类型”的名称列表。

I could make 3 different iterations where I go through all the items. 我可以进行3次不同的迭代，我会查看所有项目。 But I wonder if there is a better way. 但我想知道是否有更好的方法。 The best I came with is to "filter" this array for each iteration. 我带来的最好的是每次迭代“过滤”这个数组。 Even if I still will loop 3 times, maybe its a better way to do this, as you only go through the elements in the array that you really are interested of. 即使我仍然会循环3次，也许它是一个更好的方法来做到这一点，因为你只需要通过你真正感兴趣的数组中的元素。

Im not really sure how to filter this. 我不确定如何过滤这个。 Im using angular.js. 我正在使用angular.js。 If not, I could use plain javascript. 如果没有，我可以使用普通的JavaScript。 Or is there a better solution to this? 或者有更好的解决方案吗？

*****EDIT***** *****编辑*****

Thanks to duffy for the advice on filter-function. 感谢duffy对过滤器功能的建议。 I maybe require too much, but the thing is this: 我可能需要太多，但问题是：

There is an .html that now contains a div like this: 有一个.html现在包含这样的div：

<div ng-repeat="person in peopleContainer.get_people()">

peopleContainer is a factory in the services.js-file. peopleContainer是services.js文件中的工厂。 This factory function contains both the array with all the people and the functions to add one person/return the array with all the people. 这个工厂函数包含所有人的数组和添加一个人的函数/返回所有人的数组。

Now (forget about filtering) the ng-repeat directive above doesn't seem to work. 现在（忘记过滤）上面的ng-repeat指令似乎不起作用。 When I add a new person I can see that this person has been added to the array. 当我添加一个新人时，我可以看到此人已被添加到数组中。 But nothing happens in the div-container. 但是在div容器中没有任何反应。 No ng-repeat happens. 没有重复ng重复。 Could this be because the array with people is located in the service.js-file? 这可能是因为带有人的数组位于service.js文件中吗？ If yes: is there a way to work around this? 如果是：有办法解决这个问题吗？

Answer 1

As @duffy356 said, you can use filters. 正如@ duffy356所说，你可以使用过滤器。

Edit Resolve your promise in the controller :) (snippet updated to resolve a promise) 编辑在控制器中解析您的承诺:)（已更新代码段以解析承诺）

 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>

Answer 2

Don't do peopleContainer.get_people() in the ng-repeat , do it in the controller and add the result to a scoped variable, then use it in the ng-repeat . 不要在ng-repeat执行peopleContainer.get_people() ，在控制器中执行此操作并将结果添加到范围变量，然后在ng-repeat使用它。

Controller: 控制器：

$scope.people = peopleContainer.get_people();

HTML: HTML：

<div ng-repeat="person in people">

过滤angular.js中的数组

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-03-24 18:03:26

解决方案2
1 2016-03-24 18:10:34

过滤angular.js中的数组

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-03-24 18:03:26

解决方案2 1 2016-03-24 18:10:34

解决方案1
2 已采纳 2016-03-24 18:03:26

解决方案2
1 2016-03-24 18:10:34