Angularjs Introduction
AngularJS est un cadre JavaScript. Il peut être ajouté aux pages HTML via la balise <cript>.
AngularJS étend le HTML via des directives et lie les données au HTML à travers des expressions.
Angularjs est un cadre JavaScript
AngularJS est un cadre JavaScript. Il s'agit d'une bibliothèque écrite en javascript.
AngularJS est publié sous forme de fichier JavaScript et peut être ajouté à la page Web via des balises de script:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
Les éléments suivants sont tout pour l'introduction de la fonction de balise de filtrage de la page AngularJS dans cet article. Veuillez consulter l'introduction suivante au contenu clé:
Page HTML:
<div> <div> Catégorie de nouvelles </div> <Button ng-Click = "Clean ()"> Clear </utton> </div> <ion-conten-cantroll = "false"> <ul> <li> <p> Country and Region: </p> <ul> <li ng-repeat = "Régionname in catégory.regions" ng-Click = "onClick (regionsName.name, regionsname.checked)"> <input type = "checkbox" value = "regionsname.name" ng-checked = "regionsname.checked" /> <span> {{regionsname.cn}} </span> </li> </ul> </li> <li> <p> Capitals: </p> <ul> <li ng-repeat = "CapitalsName in catégory.capitals" ng-Click = "onClick (CapitalsName.Name, CapitalsName.Checked)"> <Input Type = "Checkbox" Value = "CapitalsName.name" ng-checked = "CapitalsName.checked" /> <span> {{CapitalsName.cn}} </span> </li> </ul> </li> <li> <p> Domain: </p> <ul> <li ng-repeat = "ScopeSname dans catégorie.scopes" ng-Click = "onclick (scopesname.name, scopesname.checked)"> <entrée type = "checkbox" value = "scopesname.name" ng-checked = "scopesname.checked" /> <span> {{scopesname.cn}} </span> </li> </li> </li> <p> Economic Informations: </p> <ul> <li ng-repeat = "EconomicData in category.economdata" ng-click = "onclick (economicdata.name, economicdata.checked)"> <entrée type = "checkbox" value = "economicData.name" ng-checked = "EconomicData.checked" /> <span> {{economicData.cn}} </span> </li> </ul> </li> <li> <p> Données de la Banque centrale: </p> <ul> <li ng-repeat = "CentralBank in catégory.centralbank" ng-Click = "onClick (CentralBank.Name, CentralBank.checked)"> <Input Type = "Checkbox" Value = "CentralBank.name" ng-Checked = "CentralBank.checked" /> <span> {{CentralBank.cn}} </pan> </li> </ul> </li> </ul> </ Button ng-Click = "InfoSRef ()"> Confirmer </futton>Bâtiment de page:
Il est divisé en 5 éléments majeurs au total, et de petites balises de classification sous chaque élément majeur sont générées par NG-Repeat.
Analyse des exigences: l'utilisateur clique sur chaque balise de filtre, ajoute le nom de balise sélectionné à un tableau et envoie le tableau à l'arrière-plan pour les programmeurs d'arrière-plan pour filtrer.
Code js:
// Classification des données du filtre d'actualités (simulation Data) $ scope.category = {régions: [{name: "regions_china", cn: "Chine", vérifié: false}, {nom: "Régions_UnitedStates", cn: "us", vérifié: FA lse}, {name: "regions_unitedkingdom", cn: "uk", vérifié: false}, {name: "regions_eurozone", cn: "europe", vérifié: false}, {name: "regions_ja Pan ", CN:" Japon ", vérifié: false}, {name:" regions_canada ", cn:" canada ", vérifié: false}, {name:" regions_australia ", cn:" Australie ", vérifié: false}, {name:" Regio ns_switzerland ", CN:" Suisse ", CN:" Suisse ", vérifié: false}, {name:" Régions_others ", cn:" autres ", vérifié: false}], Capitals: [{name:" Capitals_foreigne xchange ", cn:" forex ", vérifié: false}, {name:" Capitals_stocks ", cn:" Treasury ", vérifié: false}, {name:" Capitals_commoties ", CN:" Commodities ", vérifié : false}, {name: "Capitals_BondsBonds", CN: "Brand", vérifié: false}], Scopes: [{nom: "Scopes_macroscopic", CN: "Glob", vérifié: false}, {name: "Scopes_in Dustrial ", CN:" Industrial ", vérifié: false}, {name:" Scopes_Company ", CN:" Company ", vérifié: false}], EconomicData: [{nom:" EconomicData_yes ", CN:" Data Economic ", vérifié: false}], CentralBank: [{nom:" CentralBank_yes ", Cn:" Données ", vérifié: false}]}; // parcourez les données pour trouver l'objet avec le même nom sous le nom entrant (utilisé pour trouver l'emplacement de l'objet dans les données simulées que l'utilisateur clique) var chaque liste = (name) => {LET CATTEMORY = $ SCOPE.CATEGORY; For (var K in catégory) {for (var j in catégory [k]) {if (catégory [k] [j]. samename = catégorie [k] [j]; sameName.checked = true; return sameName}}}}; // Cette méthode reçoit principalement un tableau à élément au début, et vérifie l'étiquette qui a été sélectionnée comme état sélectionné en traversant le tableau et des données simulées au début init = () => {LET Item = AppSettings.filterFoscOsCaShAGORY; pour (var i = 0; i <item.length; i ++) {var samename = everylist (item [i]); // parce que toute la méthode sera exécutée deux fois, la raison n'a pas encore été trouvée, de sorte que le jugement de l'opportunité est ajouté de manière répétitive. Si ($ scope.categories.indexof (samename.name) <0) {$ scope.categories.push (samename.name);}}}; init (); // filtre le tableau de classification (après que l'utilisateur clique sur la balise, le nom de balise transmis et s'il est adopté. Ajoutez-le au tableau à évanouir) $ scope.onclick = (filterItem, check) => {var sameName = everylist (filterItem); if (! check) {samename.checked = true; $ scope.categories.push (filteRetem);} else {sameName.cheded = false; for (var; i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filterItem) {$ scope.categories.splice (i, 1);}}}}; // confirmer le bouton $ scope.infosref = () => {$ scope.OnCategoryChange (); $ scope.modal.hide ();}; // clear $ scope.clean = () => {Laissez che = $ ("entrée: vérifié"); // Cela ne peut pas être effacé en attribuant la valeur à [], et l'extérieur a été copié et référencé. $ scope.categories.length = 0; che.each (fonction (k, filterInput) {filterInput.checked = false;}); $ scope.infosref ();}}Ce qui précède est la petite fonction des balises de filtrage de la page AngularJS qui vous sont présentées par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!