工做積累（八）——AngularJS與單選框及多選框的雙向動態綁定

AngularJS 在 <input type="text" /> 中實現雙向動態綁定十分簡單，以下所示：

<input type="text" ng-model="topic.title" />

只須要用ng-model 與 $scope 中的屬性對應，即實現了type=」text」 的雙向動態綁定。當 <input type="radio" /> 及 <input type="checkbox" /> 時狀況略有不一樣：

1. <inputtype="radio" /> ：

<input type="radio" name="person-action" value="go_home" ng-model="person.action" />回家
<input type="radio" name="person-action" value="go_to_school" ng-model="person.action"  />回學校

經過 value 屬性指定選中狀態下對應的值，並經過 ng-model 將單選框與 $scope 中的屬性對應，便實現了 type=」radio」 時的雙向動態綁定。

 

2. <input type="checkbox" /> ：

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_sound" />鈴聲
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_vibrate" />震動
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" />呼吸燈

經過AngularJS 的內置指令 ng-true-value 和 ng-false-value ，指定多選框在選中和未選中狀態下對應的值，再經過ng-model 將其與 $scope 中的屬性對應，便實現了type=」checkbox」 的雙向動態綁定。

注：若是不使用 ng-true-value 和 ng-false-value ，則默認選中狀態下的值爲 "true" ，未選中狀態下的值爲 "false" 。

完。