工作積累(八)——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" 。

完。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章