ホームページ > 記事 > ウェブフロントエンド > AngularJS ラジオ ボタンとマルチセレクト ボックスで双方向の動的バインディングを実現_AngularJS
AngularJS ラジオ ボタンとマルチセレクト ボックスで双方向の動的バインディングを実現_AngularJS
- WBOYオリジナル
- 2016-05-16 15:20:041377ブラウズ
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 のラジオ ボタンと複数選択ボックスの双方向の動的バインディングに関する概要であり、皆さんの学習に役立つことを願っています。