Butang radio AngularJS dan kotak berbilang pilihan merealisasikan binding_AngularJS dinamik dua hala-tutorial js-php.cn

Butang radio AngularJS dan kotak berbilang pilihan merealisasikan binding_AngularJS dinamik dua hala

WBOY

Lepaskan： 2016-05-16 15:20:04

asal

1376 orang telah melayarinya

Apabila melibatkan pengikatan data dua hala dalam AngularJS, semua orang pasti akan memikirkan arahan model ng.

1. ng-model

Arahan

ng-model digunakan untuk mengikat kawalan input, pilih, kawasan teks atau borang tersuai kepada sifat dalam skop yang mengandunginya. Ia mengikat nilai ungkapan operasi dalam skop semasa kepada elemen yang diberikan. Jika harta itu tidak wujud, ia dibuat secara tersirat dan ditambah pada skop semasa.
Sentiasa gunakan model ng untuk mengikat sifat dalam model data pada skop dan bukannya sifat pada skop Ini boleh mengelakkan penggantian sifat dalam skop atau skop turunan.

<input type="text" ng-model="modelName.somePrototype" />

Salin selepas log masuk

2. type=”radio”

Tentukan nilai yang sepadan dalam keadaan yang dipilih melalui atribut nilai, dan gunakan model ng untuk memetakan butang radio kepada atribut dalam $scope, dengan itu merealisasikan pengikatan dinamik dua hala apabila type="radio".

<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女

Salin selepas log masuk

3. type="checkbox"

Gunakan arahan terbina dalam AngularJS ng-true-value dan ng-false-value untuk menentukan nilai sepadan kotak berbilang pilihan dalam keadaan yang dipilih dan tidak dipilih, dan kemudian gunakan ng-model untuk sepadan dengan atribut dalam $scope Ini merealisasikan pengikatan dinamik dua hala 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" />篮球

Salin selepas log masuk

4. Contoh lengkap

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

Salin selepas log masuk

Di atas ialah pengenalan yang berkaitan dengan pengikatan dinamik dua hala bagi butang radio AngularJS dan kotak berbilang pilihan saya harap ia akan membantu pembelajaran semua orang.