Acht Funktionen von AngularJS, die man nicht aus der Hand legen kann_AngularJS

Acht Funktionen von AngularJS, die niemand aus der Hand legen kann, werden Ihnen als Referenz zur Verfügung gestellt. Die Details sind wie folgt:

Erstes Iterative Ausgabe des ng-repeat-Tags

ng-repeat kombiniert perfekt table ul ol und andere Tags mit Arrays in js

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

Sie können sogar die Reihenfolge der Ausgabe festlegen:

<li ng-repeat="person in persons | orderBy:'name'">

Zweite Dynamische Bindung des ng-model-Tags

Jedes HTML-Tag mit Benutzereingaben und einem Wert kann dynamisch an Variablen in js gebunden werden,
Und es ist eine dynamische Bindung.

<input type="text" ng-model='password'>

Für gebundene Variablen können Sie {{}} verwenden, um direkt auf

zu verweisen

<span>you input password is {{password}}</span>

Wenn Sie mit fiter vertraut sind, können Sie problemlos in dem von Ihnen benötigten Format ausgeben

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

Drittes Klickereignis an ng-click-Ereignis binden

Mit ng-click können Sie Klickereignisse ganz einfach an ein Label binden.

<button ng-click="pressMe()"/>

Die Voraussetzung ist natürlich, dass Sie Ihre eigene pressMe-Methode in der $scope-Domäne definieren müssen.

Im Gegensatz zur herkömmlichen Onclick-Methode können Sie sogar ein Objekt an die ng-Click-Methode übergeben, wie folgt:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

Und natürlich das ng-dblclick-Tag

Vierte Zweiganweisung ng-switch on, ng-if/ng-show/ng-hide/ng-disabled Tags

Zweiganweisungen ermöglichen es Ihnen, logische Urteile über die Schnittstelle zu schreiben.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

Fünfter Überprüfungssyntax ng-trim ng-minlength ng-maxlength erforderlich ng-pattern und andere Tags

Für das Eingabefeld im Formular können Sie den Tag oben verwenden, um die Benutzereingabe zu überprüfen.
Sie wissen bereits, was sie wörtlich bedeuten.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

Sie können $scope.yourForm.inputText.$error.required verwenden, um festzustellen, ob das Eingabefeld leer ist
Sie können $scope.yourForm.inputText.$invalid verwenden, um zu bestimmen, ob der Eingabeinhalt ng-pattern, ng-maxlength, maxlength
erfüllt Bei dem Eingabeinhalt, den Sie über $scope.userNum erhalten, wurden die führenden und nachgestellten Leerzeichen aufgrund der Existenz von ng-trim entfernt.

Sechstes Dropdown-Feld ng-options tag

ng-options ist ein Tag, der speziell für Dropdown-Boxen erstellt wurde.

Code kopieren Der Code lautet wie folgt:

091201a3323c12cbe5883b29afb6763b18bb6ffaf0152bbe49cd8a3620346341

Was im Dropdown-Feld angezeigt wird, ist person.name. Wenn Sie einen davon auswählen, können Sie die person.id abrufen, die Sie über yourSelected. ausgewählt haben

Siebtes CSS-Tag im NG-Stil steuern

ng-style hilft Ihnen, Ihre CSS-Attribute einfach zu steuern

<span ng-style="myColor">your color</span>

Sie können den gewünschten Effekt ändern, indem Sie myColor einen Wert zuweisen, etwa so:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

Achte Asynchrone Anfrage $http-Objekt

AngularJS stellt für asynchrone Anforderungen ein Objekt bereit, das dem $.ajax von jquery ähnelt.
Asynchrone Vorgänge werden in AngularJS hoch geschätzt, daher sind $http-Vorgänge alle asynchron, im Gegensatz zu jquery.ajax, das auch asynchrone Parameter bereitstellt.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

Wenn Sie eine POST-Anfrage stellen, werden die Daten in „params“ für Sie an das Ende der URL gestellt und die Daten in „data“ werden in den Anfragetext eingefügt.

Wenn Sie es nach der Lektüre nicht mehr aus der Hand legen können, dann wenden Sie diese auf Ihre eigenen Projekte an!