AngularJS-Erste-Schritte-Tutorial – AngularJS Model

AngularJS-Erste-Schritte-Tutorial – AngularJS Model_AngularJS

WBOY

Freigeben： 2016-05-16 15:05:02

Original

1346 Leute haben es durchsucht

Verwandte Lektüre:

AngularJS-Einführungs-Tutorial – AngularJS-Ausdrücke

AngularJS-Einführungs-Tutorial: AngularJS-Befehle

Wie Sie im vorherigen Tutorial zu Ausdrücken und Anweisungen gelernt haben, kann das AngularJS-Modell (ng-model) den Wert im HTML-Eingabefeld an die von AngularJS erstellten Variablen binden.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="name='Jone Snow'">
名字: <input ng-model="name">
</div>
</body>
</html>

Nach dem Login kopieren

Zwei-Wege-Bindung Die bidirektionale Bindung von AngularJS bedeutet, dass ng-model an das Eingabefeld von HTML und auch an die Attribute von AngularJS gebunden ist. Daher ändert sich das Attribut, wenn sich der Wert des Eingabefelds ändert Der Wert von AngularJS wird sich ebenfalls ändern.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Snow";
});
</script>
<p>修改输入框的值，标题的名字也会相应修改。</p>
</body>
</html>

Nach dem Login kopieren

Die Anwendungsstatus-NG-Model-Direktive kann Statuswerte für Anwendungsdaten bereitstellen

dirty Der Status ist TRUE, wenn die Daten geändert wurden, und FALSE, wenn die Daten nicht geändert wurden. Selbst wenn er auf den ursprünglichen Wert geändert wird, ist er TRUE.

valid ist TRUE, wenn der Eingabewert zulässig ist, und FALSE, wenn er unzulässig ist.

touched ist TRUE, wenn auf dem Touchscreen geklickt wird, und FALSE, wenn kein Klick erfolgt.

Wenden Sie CSS-Stile basierend auf dem Status an

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
输入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
</body>
</html>

Nach dem Login kopieren

Das Eingabefeld fügt den erforderlichen Status hinzu. Wenn im Eingabefeld keine Eingabe vorhanden ist, fügt ng-model den ng-invalid-Stil zum Eingabefeld hinzu. Andernfalls löschen Sie den ng-invalid-Stil. Die ng-model-Direktive fügt basierend auf dem Status des Formularfelds die folgenden Stile hinzu bzw. entfernt sie: – ng-empty – ng-not-empty – ng-touched – ng-untouched – ng-valid – ng-invalid – ng-dirty – ng-pending – ng-pristine verwendet ng-model, um das E-Mail-Format zu überprüfen

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
</body>
</html>

Nach dem Login kopieren

Wenn das Attribut myForm.myAddress.$error.email TRUE ist (das E-Mail-Format ist falsch), steuert ng-show den anzuzeigenden Span-Inhalt.

Der obige Inhalt ist das vom Herausgeber vorgestellte AngularJS-Einführungs-Tutorial. Ich hoffe, es wird für alle hilfreich sein!