过滤angular.js

时间:2016-03-24 17:45:54

标签: javascript angularjs

我有一个对象数组:

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。或者有更好的解决方案吗?

***** EDIT *****

感谢duffy对filter-function的建议。 我可能需要太多,但问题是:

现在有一个.html包含这样的div:

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

peopleContainer是services.js文件中的工厂。 这个工厂函数既包含所有人的数组,也包含添加一个人/让所有人返回数组的函数。

现在(忘记过滤)上面的ng-repeat指令似乎不起作用。当我添加一个新人时,我可以看到此人已被添加到数组中。但是在div容器中没有任何反应。没有重复ng重复。 这可能是因为带有人的数组位于service.js文件中吗?如果是:有办法解决这个问题吗?

2 个答案:

答案 0 :(得分:2)

正如@ duffy356所说,你可以使用过滤器。

修改 在控制器中解决您的承诺:)(更新片段以解析承诺)

&#13;
&#13;
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;});
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

不要在peopleContainer.get_people()中执行ng-repeat,在控制器中执行此操作并将结果添加到范围变量,然后在ng-repeat中使用它。

控制器:

$scope.people = peopleContainer.get_people();

HTML:

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