javascript - angular.js 中的过滤数组

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

*****编辑*****

感谢 duffy 对 filter-function 的建议。 我可能需要太多,但事情是这样的:

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

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

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

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

最佳答案

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

编辑 在 Controller 中解决您的 promise :)(更新片段以解决 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>

关于javascript - angular.js 中的过滤数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36206709/

相关文章:

javascript - 如何使 $http.get 返回响应而不是 promise 对象?

php - 将用户 Gmail 联系人导入到我的网站并向他们的所有联系人发送邀请

javascript - react 状态不重新渲染

javascript 显示加载面板,无需 ajax 调用或服务调用

angularjs - 如何在 $stateProvider 的 "resolve"中使用工厂?

javascript - 动态 Angular.js 菜单

python - Django 休息框架 : XMLHttpRequest cannot load http://127. 0.0.1:8000/xyz/api/abc

javascript - 为什么我的整个网页在 Firefox 中按按键移动?

javascript - 如何在旧版 IE 中使用 String.split 捕获组?

javascript - AngularJS 中的全局后退/下一步按钮