Filtering on object map rather than array in AngularJS

Question

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> 

Answer 1

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