Angulajs 表單的ng-model綁定

一、對於文本框，只需設置 ng-model 屬性就能夠實現雙向綁定，如：

<input type="text" class="form-control" ng-model="item">

這樣在js中就能夠經過  $scope.item來實現雙向綁定。

 說明：對於文本框，經過$scope.item 獲取時，自動會除去空格，至關於在原始值基礎上調用了trim()方法。

這樣咱們在獲取數據時，不須要在判斷和去空格時。

 

二、單選按鈕組的綁定方式，如：

<label>  <input type="radio" name="optionsRadios" value="single" ng-model="seltype" >單選題</label>
<label>  <input type="radio" name="optionsRadios" value="muti" ng-model="seltype">多選題</label>

在js中的代碼：

1）初始化設置被選中的按鈕： $scope.seltype = "muti"  這樣初始時第2個radio就會被選中

2）獲取被選中的按鈕

若是 $scope.seltype 的值爲 single ，則是第1個radio被選中。

若是 $scope.seltype 的值爲 muti，則是第2個radio被選中。

 

三、複選框checkbox的綁定方式

<input type="checkbox"  ng-model="selok">選中

在js中的代碼

1）初始化選中：$scope.selok = true;

2）判斷checkbox是否被選中：

若是 $scope.selok 返回true，則被選中；不然沒有被選中

注意：這裏的selok必定要是真的布爾值，不能是其它值。好比  $scope.selok= 12 或是其它非空數據，都無效。必定必須是true 這個值。

 

須要說明的是，若是綁定的數據是一個簡單數據（非js對象），並且設置在$rootScope中。

當在html中用ng-model引用時，初始化沒有問題，能夠得到rootScope中的值，可是當表單數據發生變化時，實際是新設置了一個$scope中的數據，

對當前的$rootScope沒有影響。 若是須要對rootScope值可用，應該綁定成一個js對象，而不是簡單數據類型。