在 AngularJS 中过滤对象映射而不是数组 [英] Filtering on object map rather than array in AngularJS

问题描述

给定一个具有 $scope 属性的控制器，它是一个具有其他属性的对象而不是像下面这样的数组，我应该如何过滤 ng-repeat 集?

这是一个 JSFiddle:http://jsfiddle.net/ZfGx4/110/>

控制器:

function HelloCntl($scope, $filter) {$scope.friends = {约翰: {name: '约翰',电话:'555-1276'},玛丽: {name: '玛丽',电话:'800-BIG-MARY'},迈克:{name: '迈克',电话:'555-4321'},亚当: {name: '亚当',电话:'555-5678'},朱丽叶: {name: '朱莉',电话:'555-8765'}};}

模板:

<div ng-controller="HelloCntl"><input placeholder="Type to filter" ng-model="query"><ul><li ng-repeat="(id,friend) infriends | filter:query"><span>{{friend.name}} @ {{friend.phone}}</span>

解决方案

我会将我的数据结构更改为数组.无论如何，这是过滤好友对象的另一种实现.

angular.module('filters',['utils']).filter('friendFilter', function(utils){返回函数(输入，查询){if(!query) 返回输入；var 结果 = [];angular.forEach(输入，功能(朋友){if(utils.compareStr(friend.name, query) ||utils.compareStr(friend.phone, query))结果.推(朋友)；});返回结果；};});

这只会遍历对象一次，通过name 和phone 进行比较，可以这样调用.

我在另一个模块中定义了 compareStr，但您实际上并不需要这样做.

angular.module('utils', []).factory('utils', function(){返回{compareStr:函数(stra，strb){stra = ("" + stra).toLowerCase();strb = ("" + strb).toLowerCase();返回 stra.indexOf(strb) !== -1;}};});

不要忘记将 filters 模块注入您的应用程序

angular.module('app',['filters'])

完整示例如下:http://jsbin.com/acagag/5/edit

Given a controller with a $scope property that is an object with other properties rather than an array like below, how should I filter the ng-repeat set?

Here is a JSFiddle: http://jsfiddle.net/ZfGx4/110/

Controller:

function HelloCntl($scope, $filter) {
    $scope.friends = {
        john: {
            name: 'John',
            phone: '555-1276'
        },
        mary: {
            name: 'Mary',
            phone: '800-BIG-MARY'
        },
        mike: {
            name: 'Mike',
            phone: '555-4321'
        },
        adam: {
            name: 'Adam',
            phone: '555-5678'
        },
        julie: {
            name: 'Julie',
            phone: '555-8765'
        }
    };
}​

Template:

<div ng:app>
 <div ng-controller="HelloCntl">
  <input placeholder="Type to filter" ng-model="query">     
  <ul>
   <li ng-repeat="(id, friend) in friends | filter:query">
    <span>{{friend.name}} @ {{friend.phone}}</span>
   </li>
  </ul>
 </div>
</div>

解决方案

I would change my data structure to an array. Anyway, here's another implementation to filter your friends object.

angular.module('filters',['utils'])
  .filter('friendFilter', function(utils){

    return function(input, query){
      if(!query) return input;
      var result = [];

      angular.forEach(input, function(friend){
        if(utils.compareStr(friend.name, query) ||
           utils.compareStr(friend.phone, query))
          result.push(friend);          
      });
      return result;
    };
  });

This iterates over the object only once, compares by name and phone and can be called like this.

<li ng-repeat="friend in friends | friendFilter:query">

I defined the compareStr in another module, but you don't really need to do it.

angular.module('utils', [])
  .factory('utils', function(){
    return{
      compareStr: function(stra, strb){
        stra = ("" + stra).toLowerCase();
        strb = ("" + strb).toLowerCase();
        return stra.indexOf(strb) !== -1;
      }
    };
  });

Don't forget to inject the filters module into your app

angular.module('app',['filters'])

Here's the full example: http://jsbin.com/acagag/5/edit

这篇关于在 AngularJS 中过滤对象映射而不是数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！