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 ng-a>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script language="javascript">
      
function isCompared(key,values,query){
   //---------將key,value內容轉為string且小寫再行比較---------------//
   key = key.toString().toLowerCase();
   query = query.toString().toLowerCase(); 
   if (key.indexOf(query) != -1) return true;//若key中有搜尋值則代表找到
   //---------若values內中有包含搜尋值則代表已找到------------------//
   for (var data in values) {
       var text = values[data].toString().toLowerCase();
       if (text.indexOf(query) != -1) return true;
      
   }
  return false;//未找到
}
      
angular.module('filters',[])
  .filter('friendFilter', function(){
    
    return function(input, query){
      if(!query) return input;
      var result = {};
      
      angular.forEach(input, function(friendData, friend){
        if(isCompared(friend,friendData,query))
          result[friend] = friendData;          
      });
      return result;
    };
  });
​
​
angular.module('RoleApp',['filters'])
  .controller('HelloCntl', function($scope) {
    $scope.friends = {
        john: {
            phone: '555-1276',
            address:'Taipei'
        },
        mary: {
            phone: '800-BIG-MARY',
            address:'chyiai'
        },
        mike: {
            phone: '555-4321',
            address:'kaisung'
        },
        adam: {
            phone: '555-5678',
            address:'unlin'
        },
        julie: {
            phone: '555-8765',
            address:'american'
        }
    };  
  }); 
      </script>
  </head>
  <body>
​
​
<div ng-app='RoleApp'>
 <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>
    <ui>@{{friend.address}}</ui>
   </li>
  </ul>
 </div>
</div>
    
  </body>
</html>
Output

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

Dismiss x
public
Bin info
weihanchenpro
0viewers