Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  </head>
  <body>
​
​
<div ng-app='app'>
 <div ng-controller="HelloCntl">
  <input placeholder="Type to filter" ng-model="query">     
  <ul>
    <li ng-repeat="(data, friend) in friends | friendFilter:query">
    <span>{{data}} @ {{friend.phone}}</span>
   </li>
  </ul>
 </div>
</div>
    
  </body>
</html>
 
​
​
angular.module('utils', [])
  .factory('utils', function(){
    return{
      compareStr: function(stra, strb){
        stra = ("" + stra).toLowerCase();
        strb = ("" + strb).toLowerCase();
        return stra.indexOf(strb) !== -1;
      }
    };
  });
​
angular.module('filters',['utils'])
  .filter('friendFilter', function(utils){
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(utils.compareStr(friend, query) ||
           utils.compareStr(friendData.phone, query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
​
​
angular.module('app',['filters'])
  .controller('HelloCntl', function($scope) {
    $scope.friends = {
        john: {
            phone: '555-1276'
        },
        mary: {
            phone: '800-BIG-MARY'
        },
        mike: {
            phone: '555-4321'
        },
        adam: {
            phone: '555-5678'
        },
        julie: {
            phone: '555-8765'
        }
    };  
  });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers