Angularjs введение
Angularjs - это рамка JavaScript. Его можно добавить на HTML -страницы через тег <croppling>.
AngularJS расширяет HTML через директивы и связывает данные с HTML посредством выражений.
Angularjs - это рамка JavaScript
Angularjs - это рамка JavaScript. Это библиотека, написанная в JavaScript.
AngularJS публикуется как файл JavaScript и может быть добавлен на веб -страницу с помощью тегов скрипта:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
Ниже приведены все для введения функции фильтрации «Ангулярной фильтрации» в этой статье. Пожалуйста, смотрите следующее введение в ключевое содержание:
Страница html:
<div> <div> Категория новостей </div> <кнопка ng-click = "clean ()"> clear </button> </div> <ионоконтентный scroll = "false"> <ul> <li> <p> Страна и регион: </p> <ul> <li ng-repeat = "Regionsname в категории. ng-click = "onclick (regionsname.name, regionsname.checked)"> <input type = "fackbox" value = "regionsname.name" ng-checked = "regionsname.checked"/> <pan> {{regionsname.cn}} </span> </li> </ul> </li> <li> <p> Капиталы: </p> <ul> <li ng-repeat = "capitalsname в категории.capitals" ng-click = "onclick (capitalsname.name, capitalsname.checked)"> <input type = "checkbox" value = "capitalsname.name" ng-checked = "capitalsname.checked"/> <pan> {{capitalsname.cn}} </span> </li> </ul> </li> <li> <p> домен: </p> <ul> <li ng-repeat = " ng-click = "onclick (scopesname.name, scopesname.checked)"> <input type = "fackbox" value = "scopesname.name" ng-checked = "scopesname.checked"/> <pan> {{scopesname.cn} </span> </li> </li> </li> </li> </li> Информация: </p> <ul> <li ng-repeat = "EconomicData в категории. economicData" ng-click = "onclick (ecounmentsData.name, economionData.Checked)"> <input type = "checkbox" value = "economicData.name" ng-checked = "EconomicData.Checked"/> <pan> {{economionData.cn}} </span> </li> </ul> </li> <li> <p> Данные центрального банка: </p> <ul> <li ng-repeat = "centralbank в категории. Centralbank" ng-click = "onclick (centralbank.name, centralbank.checked)"> <input type = "checkbox" value = "centralbank.name" ng-checked = "centralbank.cocked"/> <pan> {{centralbank.cn}} </span> </li> </ul> </li> </ul> </span> </li> </ul> </li> ng-click = "InfoSref ()"> Подтвердить </button>Строительство страницы:
Он разделен на 5 основных элементов, и небольшие теги классификации под каждым основным элементом генерируются через NG-повторение.
Анализ требований: Пользователь нажимает на каждый тег фильтра, добавляет выбранное имя тега в массив и отправляет массив на фоновый фон для фоновых программистов для фильтрации.
JS -код:
// классификация данных фильтра новостей (моделирование Data) $ scope.category = {regions: [{name: "regions_china", cn: "Китай", проверено: false}, {name: "regions_unitedstates", cn: "Us", проверено: fa lse}, {name: "regions_unitedkingdom", cn: "uk", werced: false}, {name: "regions_eurozone", cn: "europe", проверено: false}, {name: "regions_ja pan ", cn:" Япония ", проверено: false}, {name:" regions_canada ", cn:" Канада ", проверено: false}, {name:" regions_australia ", cn:" Австралия ", проверено: false}, {name:" regio ns_switzerland ", cn:" Switzerland ", CN:" Switzerland ", проверено: false}, {name:" Regions_others ", CN:" Другие ", проверено: false}], Капиталы: [{name:" capitals_foreigne xchange ", cn:" forex ", проверено: false}, {name:" capitals_stocks ", cn:" Казначейство ", проверено: false}, {name:" capitals_commodities ", cn:" Comforties ", проверено : false}, {name: "capitals_bondsbonds", cn: "brand", проверено: false}], scopes: [{name: "scopes_macroscopic", cn: "в целом", проверено: false}, {name: "scopes_in Dustrial ", CN:" Industrial ", проверено: false}, {name:" scopes_company ", cn:" company ", проверить: false}], EconomicData: [{name:" EconomicData_YES ", CN:" Экономические данные ", проверены: false}], CentralBank: [{name:" CentralBANK_YES ", CN Data ", проверено: false}]}; // Перемещение данных, чтобы найти объект с одним и тем же именем в входящем имени (используется для выяснения местоположения объекта в смоделированных данных, которые пользователь нажимает) var warlist = (name) => {let Category = $ scope.category; для (var k in category) {for (var in category [k]) {if [k] jame) {var in in cateory) {if [k] jame) {jame) {j) {jame) {var in in in cateory) {if [k]) {jam) samename = категория [k] [j]; samename.checked = true; return Samename}}}; // Этот метод в основном получает массив к элементу в начале, и проверяет этикетку, которая была выбрана в качестве выбранного состояния путем пересечения массива и моделируемых данных в начале ut init = () {letembletstststststs.filterinfinfoscories; for (var i = 0; i <item.length; i ++) {var samename = in -allist (item [i]); // Потому что весь метод будет выполнен дважды, причина еще не была найдена, поэтому суждение о том, повторяется ли добавлено, чтобы повторить добавление if ($ scope.categories.indexof (samename.name) <0) {$ scope.categories.push (samename.name);}}}; init (); // Фильтрой Выбран, добавьте его в массив, который будет опубликован) $ scope.onclick = (filterItem, check) => {var samename = wannlist (filteritem); if (! check) {camename.checked = true; $ scope.categories.push (filteriTem);} els i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filteritem) {$ scope.categories.splice (i, 1);}}}}; // Подтверждение $ rack.infosref = () =>}}; // Подтверждение $ scope.infosref = () => {$ scope.oncategoryChange (); $ scope.modal.hide ();}; // clear $ scope.clean = () => {let che = $ ("Ввод: проверен"); // Это не может быть очищено, присвоив значение [], а внешняя сторона была скопирована и упоминается. $ scope.categories.length = 0; che.each (function (k, filterinput) {filterinput.checked = false;}); $ scope.infosref ();}}Выше приведено небольшая функция тегов фильтрации Angularjs Filtering, представленных вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!