AngularJS Einführung
AngularJS ist ein JavaScript -Framework. Es kann über das <Script> -Tag zu HTML -Seiten hinzugefügt werden.
AngularJs erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML.
AngularJS ist ein JavaScript -Framework
AngularJS ist ein JavaScript -Framework. Es ist eine Bibliothek in JavaScript.
AngularJS wird als JavaScript -Datei veröffentlicht und kann der Webseite über Skript -Tags hinzugefügt werden:
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
Im Folgenden finden Sie die Einführung der AngularJS -Seitenfilterungs -Tag -Funktion in diesem Artikel. Bitte beachten Sie die folgende Einführung in den Schlüsselinhalt:
Seite HTML:
<div> <div> Nachrichtenkategorie </div> <button ng-klick = "clean ()"> clear </button> </div> <ion-content scroll = "false"> <ul> <li> <p> Land und Region: </p> <ul> <li ng-repeat = "Regionsname in Kategorien. ng-klick = "Onclick (Regionsname.name, Regionsname.Conted)"> <Eingabe type = "postbox" value = "Regionsname.name" ng-checked = "Regionsname.Checked"/> <span> {{Regionsname.cn}} </span> </li> </ul> </li> <li> <p> Capitals: </p> <ul> <li ng-rrepeat = "capitalsname in category.captimal.captimal.capitals" ng-klick = "onclick (capitalsname.name, capitalsname.Conted)"> <Eingabe type = "postbox" value = "capitalsname.name" ng-checked = "capitalsname.Conted"/> <span> {{capitalsname.cn}} </span> </li> </ul> </li> <li> <p> Domäne: </p> <ul> <li ng-rrepeat = "Scopesname in Kategorien.Scopes" ng-click="onClick(ScopesName.name,ScopesName.checked)"><input type="checkbox" value="ScopesName.name" ng-checked="ScopesName.checked"/><span>{{ScopesName.cn}}</span></li></li></li><li><p>Economic Informationen: </p> <ul> <li ng-Repeat = "EconomicData in category.economicData" ng-klick = "Onclick (EconomicData.name, EconomicData.Conted)"> <Eingabe type = "Kontrollkästchen" value = "EconomicData.name" ng-checked = "EconomicData.Checked"/> <span> {{EconomicData.cn}} </span> </li> </ul> </li> <li> <p> Zentralbankdaten: </p> <ul> <li ng-repeat = "CentralBank in Category.centalBank" ng-klick = "onclick (CentralBank.name, CentralBank.Conted)"> <Eingabe type = "postbox" value = "CentralBank.Name" ng-checked = "CentralBank ng-klick = "infosref ()"> bestätigen </button>Seitenbildung:
Es ist insgesamt 5 Hauptelemente unterteilt, und kleine Klassifizierungs-Tags unter jedem Hauptelement werden über NG-Wiederholungen erzeugt.
Anforderungen an eine Analyse: Der Benutzer klickt auf jedes Filter -Tag, fügt den ausgewählten Tag -Namen einem Array hinzu und sendet das Array an den Hintergrund, damit Hintergrundprogrammierer gefiltert werden.
JS -Code:
// Nachrichtenfilterdatenklassifizierung (Simulation Daten) $ scope.category = {Regionen: [{Name: "Regions_China", CN: "China", geprüft: false}, {Name: "Regions_unitedStates", CN: "Us", Checked: FA LSE}, {Name: "Regions_unitedKingdom", CN: "UK", Checked: False}, {Name: "Regions_Eurozone", CN: "Europa", Checked: False}, {Name: "Regions_Ja Pan ", CN:" Japan ", überprüft: false}, {Name:" Regions_Canada ", CN:" Kanada ", überprüft: false}, {Name:" Regions_australia ", CN:" Australien ", überprüft: false}, {Name:" Regio NS_Switzerland ", CN:" Schweiz ", CN:" Schweiz ", überprüft: false}, {Name:" Regions_others ", CN:" Andere ", überprüft: false}], Hauptstadt: [{Name:" Capitals_forene Xchange ", CN:" Forex ", überprüft: false}, {name:" capitals_stocks ", cn:" treasury ", checked: false}, {name:" capitals_commodities ", cn:" comodities ", checked : false}, {name: "capitals_bondsbonds", cn: "marke", checked: false}], Scopes: [{name: "Scopes_Macroskopic", cn: "insgesamt", überprüft: false}, {name: "Scopes_in dustrial ", cn:" industrial ", checked: false}, {name:" Scopes_company ", cn:" company ", geprüft: false}], EconomicData: [name:" EconomicData_yes ", Cn:" Daten ", geprüft: false}]}; // Reisen Sie die Daten, um das Objekt unter dem gleichen Namen unter dem eingehenden Namen zu finden (verwendet, um den Objektspeicherort in den simulierten Daten zu ermitteln, die der Benutzer klickt) var echtlist = (name) => {let category = $ scope.category; für (var k in category) {var j. samename = category [k] [j]; samEname.Checked = true; return samename}}}}; // Diese Methode empfängt hauptsächlich ein Array zu Element am Anfang und überprüft das Etikett, das als ausgewählter Status ausgewählt wurde, indem die Array- und simulierten Daten am Anfang => {{let item = appettings.filterfoscregions; für (var i = 0; i <item.length; i ++) {var samEname = jeweils (item [i]); // Da die gesamte Methode zweimal ausgeführt wird, wurde der Grund noch nicht gefunden if ($ scope.categories.indexof (samename.name) <0) {$ scope.categories.push (samEname.name);}}}; init (); // filtern das Klassifizierungsarray (Nach dem Benutzer klickt der Markenname, der in der Auswahl. Ausgewählt, fügen Sie es dem Array hinzu, das ohnmächtig werden soll) $ scope.onclick = (filterItem, check) => {var samEname = jeweils (filterItem); if (! check) {samename.Checked = true; $ scope.categories.push (filterItem);} sonst {samename.ChEnted = false; for (vare) (varteritem) (varterItem) {{samename.checked = fehlig; for (v. varteritem) (varteritem) (varterItem) {{samename.checked = fehlig; for (v. varteritem) i = 0; i <$ scope.categories.length; i ++) {if ($ scope.categories [i] === filterItem) {$ scope.categories.splice (i, 1);}}}}}; // Button $ scope.infosref = () => => => {$ scope.oncategoryChange (); $ scope.modal.hide ();}; // Clear $ scope.clean = () => {lass Che = $ ("Eingabe: Überprüft"); // Dies kann nicht gelöscht werden, indem der Wert zu [] zugewiesen wurde, und das Außenbereich wurde kopiert und referenziert. $ scope.categories.length = 0; Che.each (Funktion (k, filterInput) {filterInput.Checked = false;}); $ scope.infosref ();}}Das obige ist die kleine Funktion von AngularJS -Seitenfilter -Tags, die Ihnen vom Editor vorgelegt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!