Подробное руководство по фильтрации и сортировке в AngularJS и пример кода

Ранее было рассмотрено использование AngularJS, здесь просто напишем小程序, который реализует функции поиска, фильтрации и сортировки.

В этой программе можно узнать:

　　1 фильтры angularjs

　　2 Метод использования ng-repeat

　　3 Использование контроллеров

　　4 Привязка данных

　　Анализ программного обеспечения

　　Сначала, чтобы выполнить фильтрацию запроса, нужно использовать фильтр filter в AngularJS.

　　Прямо в конце выражения используется символ管道 |, и по следующему образцу可以达到 эффекта фильтрации:

　　Использование фильтра filter позволяет выполнять операцию фильтрации, query - это строка, вводимая при фильтрации запроса.

　　Аналогично, использование orderBy позволяет реализовать функцию сортировки:

　　Верхний запрос и сортировка связаны с двумя переменными: query и order. Здесь можно использовать ng-model для привязки данных:

      Search:<input ng-model="query">
      Sort by:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>

　　AngularJS - это фреймворк, основанный на DOM, поэтому не нужно реализовывать какие-либо слушатели или триггеры событий. При любом изменении в поле ввода query будет запущен двусторонний рендеринг поля ввода и отображения下方表达式!

　　В отличие от других фреймворков, основанных на добавлении к DOM строк через innerHTML узлов DOM, реализация AngularJS ускоряет отображение модели и视图. Кроме того, это уменьшает количество кода, необходимого для написания ненужных监听еров и триггеров, и действительно реализует эффект, подобный Spring~

　　Визуализация данных может быть реализована с помощью ng-repeat. Когда веб-страница достигает ng-repeat, для каждого элемента массива клонируется тег, который компилируется и анализируется.　　　

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

　　Оставшаяся работа заключается в инициализации массива perons в 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>

　　Код и результат

　　В конце добавьте все коды:

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

　　Результат использования:

　　По умолчанию используется сортировка по age:

　　Выбирая, можно использовать сортировку по name

　　Когда вы вводите символы, они автоматически будут фильтровать некоторые опции

Вотcompiled информация о фильтрации и сортировке AngularJS, в будущем продолжим пополнять соответствующие материалы, спасибо всем за поддержку нашего сайта!

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, материалы предоставлены пользователями Интернета в добровольном порядке, сайт не имеет права собственности, материалы не были отредактированы вручную, и сайт не несет ответственности за связанные с этим юридические обязательства. Если вы обнаружите спорное содержимое, пожалуйста, отправьте письмо по адресу notice#oldtoolbag.com (во время отправки письма замените # на @) для жалоб,并提供相关证据. При обнаружении фактов, сайт немедленно удаляет спорное содержимое.

Основной учебник

Вам может понравиться