This article mainly introduces the functions of filtering and sorting angularjs, realizing the filtering and sorting of queries.
Through this article you can learn about the
1, Angularjs Filter
2. How to use Ng-repeat
3, the use of the controller
4, the data binding
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:
搜索:<input ng-model="query">排序:<select ng-model="order"> <option value="name">name</option> <option value="age">age</option> </select>
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>These are the initialization of the perons array that needs to be done in script: <script type="text/javascript"> functionctl($scope){ $scope.persons = [ {"name":"xingoo","age":25}, {"name":"zhangsan","age":18}, {"name":"lisi","age":20}, {"name":"wangwu","age":30} ]; $scope.order ="age"; } </script> Instance:<!doctype html>
AngularJS filtering and sequencing detailed and example code