Sharing another app in Angular JS - It is used to filter the details, written in the code.
filter.html:-
<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Angular JS </title>
</head>
<body ng-init="customers=[{name:'John Smith',city:'Phoenix'},{name:'John Roy',city:'New York'},{name:'John Black',city:'Washington'}]">
Name : <br/> <input type="text" ng-model="name" /> <br/>
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'"> {{ cust.name | uppercase}} . {{ cust.city }} </li>
</ul>
<script src="lib/angular/angular.js"></script>
</body>
</html>
Now, you will understand, how the code works with the help of the screen-shots -
filter.html:-
<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Angular JS </title>
</head>
<body ng-init="customers=[{name:'John Smith',city:'Phoenix'},{name:'John Roy',city:'New York'},{name:'John Black',city:'Washington'}]">
Name : <br/> <input type="text" ng-model="name" /> <br/>
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'"> {{ cust.name | uppercase}} . {{ cust.city }} </li>
</ul>
<script src="lib/angular/angular.js"></script>
</body>
</html>
Now, you will understand, how the code works with the help of the screen-shots -
Initially, it will look like that, when you will run the code.
It will sort based upon the data written in the code.
Explanation:-
Here, in the above example, Angular directive called "ng-init" has been declared in the "body" tag, assigned with few names & cities. All these names & cities are mentioned under the "customers" variable. "ng-model" directive has been included as one of the property in the "Name" text box. "ng-repeat" directive is used to repeat the data of all the values, declared in "customers" variable. Here, various filters like filter by name, order by city(orderBy) has been used. Even "uppercase" filter is also been used.
No comments:
Post a Comment