Web-Frontend
js-Tutorial
Angular.js überprüft Tipps zur Verwendung von ng-app und ng-model_AngularJS
Angular.js überprüft Tipps zur Verwendung von ng-app und ng-model_AngularJS
Einfache Struktur von index.html in Angular.js:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
ng-app-Attribut ist die Flag-Anweisung von angle.js, die den Bereich von angle.js markiert. ng-app kann an vielen Stellen hinzugefügt werden, wie oben zum HTML-Tag hinzugefügt, was anzeigt, dass das Angular-Skript auf der gesamten Seite funktioniert. Sie können das ng-app-Attribut auch lokal hinzufügen. Wenn Sie beispielsweise ng-app innerhalb eines bestimmten Div hinzufügen, wird der gesamte Div-Bereich mit Angular-Skripten analysiert, während andere Orte nicht mit Angular-Skripten analysiert werden.
ng-model bedeutet den Aufbau eines Datenmodells. Hier definieren wir im Eingabefeld zur Eingabe des Namens ein yourname-Datenmodell. Sobald das Modell definiert ist, können wir es unten aufrufen, indem wir {{}} nutzen. Damit ist die Datenbindung abgeschlossen. Wenn wir Inhalte in das Eingabefeld eingeben, wird dieser mit dem Hello-Anweisungsblock unten synchronisiert.
Das von ng-model definierte Datenmodell kann nicht nur in den oben genannten Szenarien verwendet werden, sondern kann auch in vielen Situationen weit verbreitet sein.
1. Filter festlegen, um die Suchfunktion zu implementieren
Im folgenden Code verwenden wir eine einfache Datenmodelldefinition + Filter, um eine Listensuchfunktion zu vervollständigen. (Dies ist ein Beispielcode von der chinesischen Website, Sie müssen sich also nicht zuerst um die unklaren Teile kümmern)
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Search: <input ng-model="query">
</div>
<div class="span10">
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
Im obigen Code ist die Datenmodellabfrage an das Eingabe-Tag des Suchfelds gebunden. Auf diese Weise werden die vom Benutzer eingegebenen Informationen mit dem Abfragedatenmodell synchronisiert. Im folgenden LI können Sie filter:query verwenden, um die Datenfilterfunktion in der Liste zu implementieren und eine Filterung basierend auf den Eingabeinformationen des Benutzers durchzuführen.
2. Stellen Sie orderBy ein, um die Listensortierfunktion zu implementieren
Im folgenden Code wird orderBy auf die gleiche Weise wie ein Filter verwendet, um der Liste eine Sortierfunktion hinzuzufügen:
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul> Oben geht es um die Nutzungsfähigkeiten von ng-app und ng-model. Ich hoffe, Sie können etwas daraus gewinnen, indem Sie die Vergangenheit Revue passieren lassen und Neues lernen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Angular Learning spricht über eigenständige Komponenten (Standalone Component)
Dec 19, 2022 pm 07:24 PM
Dieser Artikel wird Sie dabei unterstützen, Angular weiter zu lernen und die eigenständige Komponente (Standalone Component) in Angular kurz zu verstehen. Ich hoffe, er wird Ihnen hilfreich sein!
Detaillierte Erläuterung des Angular Learning State Managers NgRx
May 25, 2022 am 11:01 AM
Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Angular-Statusmanagers NgRx und stellt Ihnen die Verwendung von NgRx vor. Ich hoffe, er wird Ihnen hilfreich sein!
Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf?
Jul 26, 2022 pm 07:18 PM
Das Angular-Projekt ist zu groß. Wie kann man es sinnvoll aufteilen? Der folgende Artikel zeigt Ihnen, wie Sie Angular-Projekte sinnvoll aufteilen. Ich hoffe, er ist hilfreich für Sie!
Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung
Jun 23, 2022 pm 03:49 PM
Dieser Artikel führt Sie durch die unabhängigen Komponenten in Angular, wie Sie eine unabhängige Komponente in Angular erstellen und wie Sie vorhandene Module in die unabhängige Komponente importieren. Ich hoffe, er wird Ihnen hilfreich sein!
Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen
Sep 08, 2022 pm 08:29 PM
Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!
Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular
Dec 02, 2022 pm 09:14 PM
Dieser Artikel führt Sie durch die Abhängigkeitsinjektion, stellt die durch die Abhängigkeitsinjektion gelösten Probleme und ihre native Schreibmethode vor und spricht über das Abhängigkeitsinjektions-Framework von Angular. Ich hoffe, es wird Ihnen hilfreich sein!
Angulars :host-, :host-context- und ::ng-deep-Selektoren
May 31, 2022 am 11:08 AM
Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in Angular: host, :host-context, ::ng-deep. Ich hoffe, er wird Ihnen hilfreich sein!
Tiefes Verständnis des @Component-Dekorators in Angular
May 27, 2022 pm 08:13 PM
Component ist eine Unterklasse von Directive, einem Dekorator, der zum Markieren einer Klasse als Angular-Komponente verwendet wird. Der folgende Artikel vermittelt Ihnen ein detailliertes Verständnis des @Component-Dekorators in Angular. Ich hoffe, er wird Ihnen hilfreich sein.
