AngularJS ラジオボタンとマルチセレクトボックスで双方向の動的バインディングを実現

AngularJS ラジオボタンとマルチセレクトボックスで双方向の動的バインディングを実現_AngularJS

WBOY

リリース： 2016-05-16 15:20:04

オリジナル

1466 人が閲覧しました

AngularJS での双方向データバインディングに関して言えば、誰もが間違いなく ng-model ディレクティブを思い浮かべるでしょう。

1. NG モデル

ng-model ディレクティブは、入力、選択、テキストエリア、またはカスタムフォームコントロールを、それらを含むスコープ内のプロパティにバインドするために使用されます。現在のスコープ内の演算式の値を指定された要素にバインドします。プロパティが存在しない場合は、暗黙的に作成され、現在のスコープに追加されます。
スコープ上のプロパティではなく、スコープ上のデータモデル内のプロパティをバインドするには、必ず ng-model を使用してください。これにより、スコープまたは子孫スコープでのプロパティのオーバーライドを回避できます。

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

ログイン後にコピー

2. type=”ラジオ”

value 属性で選択状態の対応する値を指定し、ng-model を使用してラジオボタンを $scope の属性にマッピングすることで、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="チェックボックス"

AngularJS の組み込み命令 ng-true-value と ng-false-value を使用して、選択状態と非選択状態の複数選択ボックスの対応する値を指定し、ng-model を使用して、これにより、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. 完全な例

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

ログイン後にコピー

上記は、AngularJS のラジオボタンと複数選択ボックスの双方向の動的バインディングに関する概要であり、皆さんの学習に役立つことを願っています。