Heim > Artikel > Web-Frontend > Das AngularJS-Optionsfeld und das Mehrfachauswahlfeld realisieren eine bidirektionale dynamische Bindung_AngularJS

Das AngularJS-Optionsfeld und das Mehrfachauswahlfeld realisieren eine bidirektionale dynamische Bindung_AngularJS

WBOYOriginal: 2016-05-16 15:20:041376Durchsuche

Wenn es um die bidirektionale Datenbindung in AngularJS geht, wird sicherlich jeder an die ng-model-Direktive denken.

1. ng-Modell

Die

ng-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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie Eingabeaufforderungsinformationen für das Eingabekennwortfeld in js (mit HTML5-Implementierungsmethode)_Javascript-KenntnisseNächster Artikel：So implementieren Sie Eingabeaufforderungsinformationen für das Eingabekennwortfeld in js (mit HTML5-Implementierungsmethode)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen