Programming analysisThe previous understanding of the use of ANGULARJS, here simply write a small program, the implementation of query filtering and sorting functions.
In this program you can learn:
1 Angularjs Filter
2 How to use Ng-repeat
3 Use of the controller
4 Binding of data
First, if you first query the filter, you will use the filter in Angularjs.
Use the pipe command immediately after the expression | , you can achieve a filtering effect by following this notation:
{{persons | filter:query}}
By using filter for filtering, query is the string that is entered when the query is filtered.
Similarly, the ability to sort is accomplished by using the order by:
{{persons | filter:query | orderby:order}}
The above query and sort involves two variables, query and order. Here you can use Ng-model to implement data binding:
Search:<input ng-model="query"> Sort by:<select ng-model="order"> <option value="name">name</option> <option value="age">age</option> </select>
Angularjs is a DOM-based framework language, so there is no need to implement any listener and event triggers, and when the input box where the query is located changes, it triggers a two-way refresh of the input box and the expression below!
The implementation of ANGULARJS accelerates the presentation of models and views, compared to other frameworks, which are based on strings added to the DOM via DOM node innerHTML. and reduce a lot of unnecessary listener AH trigger Ah, such as the writing of code, really achieve a similar effect of spring ~
The presentation of the data can be achieved through ng-repeat . When the Web page resolves to ng-repeat , a copy of the tag is cloned for each element in the array for compilation parsing.
<ul class="persons"> <li ng-repeat="person in persons | filter:query | orderBy:order"> {{person.name}} {{person.age}} </li> </ul>
The rest of the work is to initialize the perons array in script:
Code and results<div ng-controller="ctl"> ... </div> <script type="text/javascript"> function ctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"name":"lisi","age":20}, {"name":"wangwu","age":30} ]; $scope.order = "age"; } </script>
Finally, put all the code on it:
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctl">
Search:<input ng-model="query">
Sort by:<select ng-model="order">
<option value="name">name</option>
<option value="age">age</option>
</select>
<ul class="persons">
<li ng-repeat="person in persons | filter:query | orderBy:order">
{{person.name}}
{{person.age}}
</li>
</ul>
</div>
<script type="text/javascript">
function ctl($scope){
$scope.persons = [
{"name":"xingoo","age":25},
{"name":"zhangsan","age":18},
{"name":"lisi","age":20},
{"name":"wangwu","age":30}
];
$scope.order = "age";
}
</script>
</body>
</html>
View Code
Results:
By default, age is used for sorting:
Select to sort by name
When inputting characters again, some options will be filtered out through query automatically
Filtering and sorting based on angularjs
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
