демо
Вот весь пример демонстрации
1. filter.js файл
Angular.Module ("examplePapp", []). Constant ("ProductsUrl", "http: // localhost:/products") .controller ("defaultCtrl", function ($ scope, $ http, productsurl) {$ http.get (productionUrl) .Success (function) {$ rafope. множество});});Здесь я использую представленную услугу в качестве постоянной, и преимущество написания этого заключается в том, что я могу легко ее изменить.
Для использования услуги $ http, пожалуйста, обратитесь к My Angularjs (iii).
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleapp"> <Head> <meta http-equiv = "type" content = "text/html; charset = utf- src = "angular.js"> </script> <link href = "bootstrap-teme.css" rel = "stylesseept"/> <link href = "bootstrap.css" rel = "stylesseet"/> <script src = "filter.js"> </script> </head-steep> <body ng-controller = "defller =" defl > <div> <div> <h> Продукты </h> </div> <table> <thead> <tr> <td> name </td> <td> категория </td> <td> цена </td> <td> expiry </td> </tr> </thead> <tbody> <ttr ng-repeat = "intemple"> <td> <tbode> <ttr> <ttr ng-repeat = " OperCase}} </td> <td> {{item.category}} </td> <td> {{item.price | валюта}} </td> <td> {{item.expiry | номер}} </td> <td> {{item | json}} </td> </tr> </tbody> </table> </div> </body> </html>Результаты пробега:
Используйте фильтр
Фильтры разделены на две категории:
1. Фильтрация отдельных данных
2. Работайте на съемочной площадке.
1. Относительно прост в эксплуатации данных . Как показано на демонстрации, он может быть отформатирован в {{item | валюта}} и т. д.
Валюта: «F» может быть ценовой фильтрованием в фунты.
Один фильтр данных хочет отфильтровать формат данных после фильтра: в соответствующем символе формата.
Число: представляет данные о десятичных значениях данных.
2: Фильтрация сбора , фильтрация определенного числа из коллекции.
В основной демонстрации я добавил это:
<div> <h> продукты </h> </div> <div> ограничение: <select ng-model = "Limitvalue" ng-options = "p для p в limitrange"> </select> </div> Filter.js был добавлен: $ http.get (productsurl) .success (function (data) {$ scope. $ scope.limitvalue = ""; // Если это строка <span style = "fanogy-color: rgb (,,);"> $ scope.limitrange = []; для (var i =; i <= $ scope.products.length; i ++) {$ scope.limitrange.push (i.tosstring (); ); ">} </span> </span>}); <tr ng-repeat = "item in products | limitto: LimitValue"> <Td> {{item.name | OperCase}} </td> <td> {{item.category}} </td> <td> {{item.price | валюта}} </td> <td> {{item.expiry | номер}} </td> <td> {{item | json}} </td> </tr> <span style = "line-hight:.; font-family: verdana, arial, helvetica, sans-serif; font-size: px; фоновый колот: rgb (,,);"> </span>При написании функций вы должны быть написаны в успехе, потому что данные JSON получают асинхронно.
результат:
Ограничение: вы можете настроить количество отображения на странице.
Создать фильтр
Angularjs имеет два фильтра. Во -первых, мы можем создавать фильтры, которые форматируют отдельные данные, такие как: первая буква с первой буквой.
Давайте сначала поговорим о том, как определить фильтр: фильтр создается через модуль. Фильтр, а общий формат творения:
Angular.Module ("exampleApp") // означает получить модуль. Фильтр создается под модулем.
.filter ("MABELCASE", function () {// При получении двух параметров, первый параметр представляет имя фильтра, а второй - это заводская функция
возврат функции (value, reverse) {// возвращать рабочую функцию для фильтрации соответствующего процесса фильтрации. Первый параметр указывает объект, который необходимо отформатировать, а второй параметр указывает конфигурацию и какой формат следует следовать.
if (angular.isstring (value)) {var Intermediate = обратный? value.touppercase (): value.tolowercase (); return (reverse? Intermediate []. ToLowerCase (): Intermediate []. ToupperCase () + Intermediate.substr ());} else {return value;}}});Я написал это в файл JS. Customfilter.js Не забудьте добавить его.
<link href = "bootstrap.css" rel = "styleSheet"/> <script src = "filter.js"> </script> <script src = "customfilter.js"> </script>
Хорошо, теперь я изменю данные:
<td> {{item.name | Метка: true}} </td>Как упоминалось ранее, если вам нужно добавить информацию о конфигурации, формат записи: Filter: опция
Конечно, параметры по умолчанию не могут быть записаны, а значение по умолчанию будет предоставлено нулевым или неопределенным.
результат:
Это так просто настраивать функцию фильтра для обработки каждого данных.
2. Настройте функции, обработанные коллекцией, как Limitto.
Angular.Module ("examplePapp"). Filter ("labelcase", function () {return function (значение, обратное) {if (angular.isstring (value)) {var merpmediate = обратное? Value.touppercase (): value.tolowercase (); return? Intermediate.substr ());} else {return value;}}}). Filter ("skip", function () {return function (data, count) {if (angular.isArray (data) && angular.isnumb данные;}}});Модифицированная часть HTML:
<tr ng-repeat = "Предмет в продуктах | Skip:">
Результаты: в общей сложности шесть деталей данных, и 2 штуки были переданы с использованием фильтра Skip.
При настройке фильтра я обнаружил, что был определен фильтр. Я не хочу неоднократно определять это. Что я должен делать? Мы также можем использовать созданный фильтр для его создания.
Angular.Module ("examplePapp"). Filter ("labelcase", function () {return function (значение, обратное) {if (angular.isstring (value)) {var merpmediate = обратное? Value.touppercase (): value.tolowercase (); return? Intermediate.substr ());} else {return value;}}}). Filter ("skip", function () {return function (data, count) {if (angular.isArray (data) && angular.isnumb data;}}}). Filter ("take", function ($ filter) {// Вы можете видеть, что я ссылаюсь на встроенный сервис AngularJs в функции заводской. Программирование.$ Filter ('Skip') вызывает фильтр Skip, потому что он возвращает функцию, поэтому мы можем продолжать передавать параметры.
<tr ng-repeat = "Предмет в продуктах | Take ::">
результат:
Вот как закончился фильтр. Разве это не очень просто?