Wenn es um die bidirektionale Datenbindung in AngularJS geht, wird sicherlich jeder an die ng-model-Direktive denken.
1. ng-Modell
Dieng-model-Direktive wird verwendet, um Eingabe-, Auswahl-, Textbereichs- oder benutzerdefinierte Formularsteuerelemente an Eigenschaften in dem Bereich zu binden, der sie enthält. Es bindet den Wert des Operationsausdrucks im aktuellen Bereich an das angegebene Element. Wenn die Eigenschaft nicht vorhanden ist, wird sie implizit erstellt und dem aktuellen Bereich hinzugefügt.
Verwenden Sie immer ng-model, um Eigenschaften innerhalb eines Datenmodells an den Bereich zu binden, anstatt Eigenschaften an den Bereich. Dadurch können Eigenschaftsüberschreibungen im Bereich oder in untergeordneten Bereichen vermieden werden!
<input type="text" ng-model="modelName.somePrototype" />
2. type=“radio“
Geben Sie den entsprechenden Wert im ausgewählten Zustand über das Wertattribut an und ordnen Sie das Optionsfeld mithilfe von ng-model dem Attribut in $scope zu, wodurch eine bidirektionale dynamische Bindung bei type="radio" realisiert wird.
<input type="radio" name="sex" value="male" ng-model="person.sex" />男 <input type="radio" name="sex" value="female" ng-model="person.sex" />女
3. type="checkbox"
Verwenden Sie die integrierten Anweisungen ng-true-value und ng-false-value von AngularJS, um die entsprechenden Werte des Mehrfachauswahlfelds im ausgewählten und nicht ausgewählten Zustand anzugeben, und verwenden Sie dann ng-model, um dem zu entsprechen Attribute in $scope. Dies realisiert die bidirektionale dynamische Bindung von type="checkbox".
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
4. Vollständiges Beispiel
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>radio & checkbox</title>
<script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女
<input type="text" ng-model="person.sex" />
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
<span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.person = {
sex: "female",
like: {
pingpong: true,
football: true,
basketball: false
}
};
});
</script>
Das Obige ist die relevante Einführung in die bidirektionale dynamische Bindung von AngularJS-Optionsfeldern und Mehrfachauswahlfeldern. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.
