Detailed Explanation and Example Code of AngularJS Filtering and Sorting

After understanding the usage of AngularJS, a simple program is written here to implement the functions of query filtering and sorting.

This program can be learned:

　　1 AngularJS filters

　　2 ng-Repeat usage

　　3 Controller usage

　　4 Data binding

　　Program design analysis

　　First, if you want to perform query filtering first, you need to use AngularJS's filter filter.

　　Directly use the pipe command | after the expression, and the following format can achieve the effect of filtering:

　　Filter operations can be implemented by using filter. query is the string entered during query filtering.

　　Similarly, the sorting function can be implemented by using orderBy:

　　The query and sorting mentioned above involve two variables, query and order. Here, ng is used directly:-Data binding can be implemented with model:

      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 framework language based on DOM, so there is no need to implement any listeners or event triggers. When any change occurs in the input box where query is located, it will trigger the bidirectional refresh of the input box and the expression displayed below!

　　Compared to other frameworks, it is based on strings added to the DOM through the innerHTML of DOM nodes, the implementation of AngularJS accelerates the display of the model and view and reduces the writing of a large number of unnecessary listeners and triggers, truly realizing the effect of spring.

　　The display of data can be achieved through ng-The repeat implementation. When the web page parses to ng-When using repeat, a copy of the tag is cloned for each element in the array and compiled for parsing.　　　

　　　<ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>

　　The remaining task is to initialize the perons array in the 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

　　The full code is attached below:

!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>

　　Using result:

　　By default, sorting is performed using age:

　　By selecting, you can use name sorting

　　When entering characters again, some options will be automatically filtered out by query

This is the material collection of AngularJS filtering and sorting, and the relevant materials will continue to be supplemented in the future, thank you all for your support to this site!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)

Basic Tutorial