I have learned about the usage of AngularJS before, so I will simply write a small program to implement the functions of query filtering and sorting.
You can learn from this program:
1 angularjs filter
2 How to use ng-repeat
3. Use of controllers
4 Data binding
Programming Analysis
First, if you want to query filters first, you need to use the filter filter in AngularJS.
Use the pipeline command character | directly after the expression, and follow the following writing method to achieve a filtering effect:
{{ persons | filter:query }}
By using filter to implement filtering, query is the string entered when querying filtering.
Similarly, the sorting function can be achieved using orderBy:
{{ persons | filter:query | orderBy:order }}
The above query and sort involve two variables, query and order. Here you can directly 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 listeners and event triggers. When any change in the input box where the query is located, the input box and the following expression will be triggered to refresh the input box and the following expression!
Compared with some other frameworks, it is added to the DOM through the DOM node innerHTML based on strings. The implementation of AngularJS accelerates the display of models and views. It also reduces the writing of codes such as unnecessary listeners and triggers, and truly achieves spring-like effects~
Data presentation can be achieved through ng-repeat. When the web page parses to ng-repeat, a tag will be cloned for each element in the array for compilation and parsing.
<ul> <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:
<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>Code and results
Finally, all the codes are posted:
<!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> <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>Use results:
By default, use age to sort:
By selecting, you can use name sort
When entering characters, some options will be automatically filtered out through query.
The above is the information sorting for AngularJS filtering and sorting. We will continue to add relevant information in the future. Thank you for your support for this website!