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

问题描述

由于用与其他属性，而不是像下面的数组对象的$ scope属性控制器，我应该如何筛选 NG-重复设置？

下面是一个的jsfiddle： http://jsfiddle.net/ZfGx4/110/

控制器：

 函数HelloCntl（$范围，$过滤器）{
    $ scope.friends = {
        约翰：{
            名称：'约翰'，
            电话：555-1276
        }，
        玛丽：{
            名称：'玛丽'，
            电话：800 BIG-MARY'
        }，
        迈克：{
            名称：'迈克'，
            电话：555-4321
        }，
        亚当：{
            名称：'亚当'，
            电话：555-5678
        }，
        朱莉：{
            名称：朱莉，
            电话：555-8765
        }
    };
}
 

模板：

 ＆LT; D​​IV NG：应用＆GT;
 ＆LT; D​​IV NG控制器=HelloCntl＆GT;
  ＆LT;输入占位=类型过滤NG模型=查询＆GT;
  ＆LT; UL＆GT;
   ＆LT;中的朋友（ID，朋友）|过滤器：查询里NG-重复=＆GT;
    ＆LT;跨度＆GT; {{friend.name}} @ {{friend.phone}}＆LT; / SPAN＆GT;
   ＆LT; /李＆GT;
  ＆LT; / UL＆GT;
 ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

我想我的数据结构改变到一个数组。总之，这里的过滤你的朋友反对另一种实现方式。

  angular.module（'过滤器'，['utils的']）
  .filter（'friendFilter'，函数（utils的）{    返回功能（输入，查询）{
      如果返回输入（查询！）;
      VAR的结果= [];      angular.forEach（输入功能（朋友）{
        如果（utils.compareStr（friend.name，查询）||
           utils.compareStr（friend.phone，查询））
          result.push（朋友）;
      }）;
      返回结果;
    };
  }）;
 

这遍历对象只有一次，由名称比较和电话键，可以这样调用。

 ＆LT;李NG重复=朋友的朋友| friendFilter：查询＆GT;
 

我在另一个模块中定义的 compareStr ，但你并不真的需要做到这一点。

  angular.module（'utils的'，[]）
  .factory（'utils的'，函数（）{
    返回{
      compareStr：功能（STRA，STRB）{
        斯特拉=（+ STRA）.toLowerCase（）;
        STRB =（+ STRB）.toLowerCase（）;
        返回stra.indexOf（STRB）== -1！;
      }
    };
  }）;
 

不要忘了在过滤器模块注入到你的应用程序

  angular.module（'应用'，['过滤器']）
 

下面是完整的例子： 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屋！