Angulajs 表單的ng-model綁定


1、對於文本框,只需設置 ng-model 屬性就可以實現雙向綁定,如:

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

這樣在js中就可以通過  $scope.item來實現雙向綁定。

 說明:對於文本框,通過$scope.item 獲取時,自動會除去空格,相當於在原始值基礎上調用了trim()方法。

這樣我們在獲取數據時,不需要在判斷和去空格時。

 

2、單選按鈕組的綁定方式,如:

<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被選中。

 

3、復選框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對象,而不是簡單數據類型。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM