AngularJS filtering and sequencing detailed and example code

Source: Internet
Author: User






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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.