Filter an Array Based on User Input

  1. <!DOCTYPE html>  
  2. <html>  
  3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  4. <body>  
  5.   
  6. <div ng-app="myApp" ng-controller="namesCtrl">  
  7.   
  8. <p>Type a letter in the input field:</p>  
  9.   
  10. <p><input type="text" ng-model="test"></p>  
  11.   
  12. <ul>  
  13.   <li ng-repeat="x in names | filter:test">  
  14.     {{ x }}  
  15.   </li>  
  16. </ul>  
  17.   
  18. </div>  
  19.   
  20. <script>  
  21. angular.module('myApp', []).controller('namesCtrl', function($scope) {  
  22.     $scope.names = [  
  23.         'c++',  
  24.         'c#',  
  25.         'c',  
  26.         '.net',  
  27.         'asp.net',  
  28.         'mvc',  
  29.         'AnjularJs',  
  30.         'python',  
  31.         'ruby'  
  32.     ];  
  33. });  
  34. </script>  
  35.   
  36. <p>The list will only consists of names matching the filter.</p>  
  37.   
  38.   
  39. </body>  
  40. </html>