在AngularJS中提及雙向資料繫結，大家肯定會想到ng-model指令。
一、ng-model
ng-model指令用來將input、select、textarea或自訂表格單控制項同包含它們的範圍中的屬性進行綁定。它將當前範圍中運算運算式的值同給定的元素進行綁定。如果屬性不存在，它會隱式建立並將其添加到當前範圍中。
始終用ng-model來綁定scope上一個資料模型內的屬性，而不是scope上的屬性，這可以避免在範圍或後代範圍中發生屬性覆蓋！
<input type="text" ng-model="modelName.somePrototype" />
二、type=”radio”
通過 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" />女
三、type=”checkbox”
通過AngularJS 的內建指令 ng-true-value 和 ng-false-value ，指定多選框在選中和未選中狀態下對應的值，再通過ng-model 將其與 $scope 中的屬性對應，便實現了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" />籃球
四、完整樣本
<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單選框及多選框實現雙向動態綁定的相關介紹，希望對大家的學習有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
