Я узнал об использовании AngularJS, поэтому я просто напишу небольшую программу для реализации функций фильтрации и сортировки запросов.
Вы можете извлечь уроки из этой программы:
1 Angularjs Filter
2 Как использовать ng-repeat
3. Использование контроллеров
4 Привязка данных
Анализ программирования
Во -первых, если вы хотите сначала запросить фильтры, вам нужно использовать фильтр фильтра в AngularJ.
Используйте символ команды трубопровода | сразу после выражения и следуйте следующему методу написания для достижения эффекта фильтрации:
{{люди | Фильтр: запрос}}
Используя фильтр для реализации фильтрации, запрос - это строка, введенная при запросе фильтрации.
Точно так же функция сортировки может быть достигнута с помощью OrderBy:
{{люди | Фильтр: запрос | orderby: order}}
Приведенный выше запрос и сортировка включают две переменные, запрос и порядок. Здесь вы можете напрямую использовать NG-модель для реализации привязки данных:
Поиск: <input ng-model = "Query"> sort by: <select ng-model = "order"> <vitue value = "name"> name </option> <option value = "age"> age </option> </selet>
AngularJS является основанным на DOM-структуре, поэтому нет необходимости внедрять какие-либо слушатели и триггеры событий. Когда какое -либо изменение в ящике ввода, где находится запрос, входная коробка и следующее выражение будут запускаются, чтобы обновить входную коробку и следующее выражение!
По сравнению с некоторыми другими структурами, он добавляется в DOM через Node Node Node на основе строк. Реализация AngularJS ускоряет отображение моделей и представлений. Это также уменьшает написание кодов, таких как ненужные слушатели и триггеры, и действительно достигает весенних эффектов ~
Презентация данных может быть достигнута с помощью NG-повторения. Когда веб-страница анализирует NG-Repeat, для каждого элемента будет клонирован тег в массиве для компиляции и анализа.
<ul> <li ng-repeat = "Человек в лицах | Фильтр: Query | orderby: order"> {{person.name}} {{person.age}} </li> </ul>Остальная часть работы состоит в том, чтобы инициализировать массив Perons в сценарии:
<div ng-controller = "ctl"> ... </div> <script type = "text/javascript"> function ctl ($ scope) {$ scope.persons = [{"name": "Xingoo", "Age": 25}, {"name": "zhangsan", "Age": 18}, {":", ",", ",", ",", ",", ",", ",", ",", ",", ",". {"name": "wangwu", "age": 30}]; $ scope.order = "возраст"; } </script>Код и результаты
Наконец, все коды размещены:
<! Doctype html> <html ng-app> <head> <meta http-equiv = "content-tpe" content = "text/html; charset = utf-8"/> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/Apps.jps.min. </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": "zhangs", ",", ",", ",": {"name": "lisi", "Age": 20}, {"name": "wangwu", "age": 30}]; $ scope.order = "возраст"; } </script> </body> </html>Используйте результаты:
По умолчанию используйте возраст для сортировки:
Выбирая, вы можете использовать имени сортировки
При вводе символов некоторые параметры будут автоматически отфильтрованы через запрос.
Выше представлено сортировка информации для фильтрации и сортировки AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!