Rumah >hujung hadapan web >tutorial js >Butang radio AngularJS dan kotak berbilang pilihan merealisasikan binding_AngularJS dinamik dua hala

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

WBOYasal: 2016-05-16 15:20:041472semak imbas

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

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" />女

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" />篮球

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan maklumat segera kotak kata laluan input dalam js (dengan kaedah pelaksanaan html5)_kemahiran javascriptArtikel seterusnya：Bagaimana untuk melaksanakan maklumat segera kotak kata laluan input dalam js (dengan kaedah pelaksanaan html5)_kemahiran javascript

Artikel berkaitan

Lihat lagi