Angular-從控制器訪問動態創建的表單元素

Question

我有一個用ng-repeat生成的簡單表格：

<form name="myForm">
    <button ng-click="addFormElement()">+</button>

    <div ng-repeat="model in models">
        <input type="text" name="formElement{{$index}}" ng-model="model.value" />
    </div>
</form>

通過單擊“加號”按鈕添加新元素。 這是代碼：

$scope.addFormElement = function() {
    $scope.models.push({ value: "test"});

    console.log($scope.myForm);
    for (var i = 0; i < $scope.models.length; i++) {
        console.log($scope.myForm["formElement"+i]);
    }
};

問題：在第一個控制台日志中，我可以看到當前添加的新輸入字段，但是當我嘗試在for循環中打印具體元素時，它記錄為“未定義”。 當我添加更多元素時，最后一個（當前添加）始終在第一個日志中定義，而在第二個日志中未定義。 你知道為什么嗎？

日志打印屏幕在這里

Answer 1

我做了一個plnkr，您將在其中找到解決方案：

$timeout(function(){
  for (var i = 0; i < $scope.models.length; i++) {
    console.log($scope.myForm["formElement"+i]);
  } 
});

https://plnkr.co/edit/oTttVJrAOiSRn3jfde5q

您應該在$ timeout內調用它。 您需要它來等待下一個角度的摘要循環 。 在內部$ timeout將調用$ apply，它將強制同步兩種方式的數據綁定。