angular.js - AngularJS中form的input控制項綁定問題
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-15 16:53:30
0
2
564

我從官方文件中了解到當給form指定name,則會將form加入scope中,利用form的name來取得form物件;同時也能根據控制項的name,從form物件中取得控制項物件。
如:

<form role="form" name="infoForm">
    <input name="name" class="xxx" ng-model="xxx">
</form>

在controller

var form = $scope.infoForm;
//如果控件内容发生改变
if(form.name.$dirty) {
    ...
}

現在遇到的問題是:
有一系列控件是透過ng-repeat產生的,我嘗試過"name = xx{{$index}}"來指定不同的控件,

<form name="adminForm">
    管理员名单
    <p ng-repeat="manager in theEditingRobot.managers">
      <p class="cx-inputer">
        <input name="manager{{$index}}" type="email" placeholder="请输入邮箱"
               ng-model="manager.val" ng-blur="checkManager($index)">
      </p>
    </p>
</p>

結果發現,雖然在html頁中可以看到ng-repeat產生的控制項name分別為xxx0,xxx1等,但是查看form物件屬性的時候發現,沒有xxx0,xxx1等屬性,而只有xxx{{$index} }屬性,且該屬性表示ng-repeat產生的最後一個input控制項。如圖,

html頁:


如圖所示,ng-repeat產生了2個input控制

但是在controller中調試時發現,form中沒有manager0和manager1屬性,而只有manager{{$index}},該屬性表示manager1

推論是ng-repeat展開發生在form添加到scope行為後。那麼,如何才能透過form取得到所有的控制項物件呢?為什麼$scope.adminForm顯示的是Constructor而不是Object?

PS:我使用的是yeoman自動產生的框架
PPS: 也發現form顯示instantiate.c的情況,仍然出現上述問題
JSFiddle連結:https://jsfiddle.net/xwadh6kt/1/

曾经蜡笔没有小新
曾经蜡笔没有小新

全部回覆(2)
阿神

<input name="xxx{{$index}}">

注意,表單元素的 name 只能是字串,無法建構陣列或物件等資料類型,但是字串裡可以用雙大括弧解析變數。

剛好回答的時候我正在做一個類似的東西,動態生成的表單組使用 ngRepeat 遍歷,給你看實際效果:

這是對應的原始碼:

id 和 name 我都用了這種方式來取得唯一值。

世界只因有你

原因是angularjs的版本問題,我使用1.4的版本就沒有出現上述問題,
詳見:http://stackoverflow.com/questions/24020503/angular-ng-repeat-with-ng-...

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板