如何獲取ngRepeat指令中的輸入字段的NgModelController？

通常情況下，通過表單和輸入字段，表單控制器將在表單名稱屬性下發布到相關的範圍中。而且，NgModelController在輸入名稱屬性下發布。所以對於與ngModel指令的輸入字段中，輸入字段NgModelController可以像$scope.myFormName.myInputFieldName如何獲取ngRepeat指令中的輸入字段的NgModelController？

的問題是如何做同樣的事情來檢索（獲得NgModelController）爲ngRepeat指令裏面輸入字段？

我想命名輸入字段使用$索引作爲名稱的一部分，所以每個模板實例是唯一命名的。這使得好了，

<input name="foo_{{$index}}" ...

渲染實例與$索引== 3

<input name="foo_3" ...

但是，試圖通過公佈姓名，以獲得ngModelController不工作（這是不確定的），例如：

$scope.myFormName.foo_3

顯示這是這裏的plunker：http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview

這表明成功獲取ngModelController for'plain'input元素並調用$ setValidity，並且還顯示無法在ngRepeat指令中獲取輸入元素的ngModelController。

複製的代碼中的相關部分從以下plunker：

<div ng-repeat="element in elements"> 
    <div ng-class="{error: form['foo_{{$index}}'].$invalid}"> 
    <input name="foo_{{$index}}" ng-model="element.a" type="number"> 
    <span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span> 
    </div> 
</div> 
{{form.foo_0.$setValidity('bar', false)}}

來源

2013-03-01 TsenYing

我猜問題是，NG-重複創建一個新的範圍，你不能簡單地訪問孩子範圍：這裏類似這樣的回答：http://stackoverflow.com/questions/14491433/accessing-the-model -inside-a-ng-repeat對不起，我沒有一個好主意，除了現在編寫自定義指令外，如何更改它：/ – 2013-03-01 21:50:06

@Flek是正確的，新的子範圍ng-repeat創建的是這裏問題的根源。由於瀏覽器不允許嵌套< form>元素，所以在嵌套表單時或在ngRepeat內部進行表單驗證時必須使用ngForm。

請參閱Pawel's answer關於谷歌羣組的線程，其中顯示瞭如何使用ng-form創建內部窗體，和/或@ blesh的SO answer。

來源

2013-03-02 02:05:07

這個答案提供了處理問題所需的信息。我想出的解決方案是將ngForm與自定義指令結合使用。作爲背景，目標是呈現服務器端驗證錯誤;所以服務器提交回調會在範圍內設置一個結構。該指令將$觀察錯誤結構。顯示此解決方案的plunkr位於：http：// plnkr。CO /編輯/ TdihRm5iMVPb8BsUWihg – TsenYing 2013-03-05 19:48:43

如果我明白你的問題正確，您試圖訪問該ng-repeat中創建的表單元素。

請看看這個小提琴http://jsfiddle.net/EF5Jp/。在按鈕點擊處理程序中，您將可以訪問編號爲myForm.foo_2的元素。您可以注意到該元素被myForm.foo_2檢索到，而不是$scope.myForm.foo_2。第二件事是，使用其範圍更改值，而不是使用它的值屬性，如angular.element(element).scope().foo = 6;。

來源

2013-03-02 01:22:44 rajkamal

感謝您的輸入。但是，我需要的是訪問模型的ngModelController以調用$ setValidity方法（而不是模型本身）。 – TsenYing 2013-03-05 19:53:15

如何獲取ngRepeat指令中的輸入字段的NgModelController？

回答

相關問題