יום שבת, 6 ביולי 2013

Adding filters to ng-repeat

The following code demonstrate a simple use of filter in angulargs  ng-repeat
The only part that was change from prev posts is the view 

  1: <!doctype html>
  2: <html ng-app="operatorDetailsApp">
  3:   <head>
  4:     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
  5:     <script src="operators.js"></script>
  6:     <link rel="stylesheet" href="operators.css">
  7:   </head>
  8:   <body>
  9:     <h2>Operators</h2>
 10:        <p>Search criteria: {{opertorsFilter}}</p>     
 11:     <div ng-controller="OperatorsContoller">     
 12:       <ul >
 13:         <li ng-repeat="operator in operators|  filter:opertorsFilter">         
 14:         
 15:           <input type="checkbox" ng-model="operator.IsAvailible" ng-disabled="false">
 16:           <span >{{operator.name}}</span>         
 17:         </li>
 18:       </ul>
 19: 
 20:         <span>Availible operators:{{Availibles()}} </span>
 21:         <br />
 22:         <button ng-click="Compliment()" ng-init="SetEventChecked()">
 23:             Compliment
 24:         </button>
 25:         <span >{{LastClicked}}</span>   
 26:     </div>
 27:       <div>
 28:       Search operator : <input ng-model="opertorsFilter">
 29:       </div>
 30:   </body>
 31: </html>

The code binds the operatorFilter variable to the search list box and add the filter to the ng-repeat
The result :


Capture27


Resources:
http://docs.angularjs.org/tutorial/step_03

ב-
תוויות:

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)