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>

通过单击 "plus" 按钮添加新元素。这是代码：

$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 循环中打印具体元素时，它会记录 "undefined"。当我添加更多元素时，最后一个（当前添加的）总是在第一个日志中定义，但在第二个日志中未定义。你知道为什么吗？

Printscreen of logs here

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 内调用它。您需要它来等待 angular 的 下一个摘要周期 。在内部 $timeout 将调用 $apply 并强制同步双向数据绑定。

Angular - 从控制器访问动态创建的表单元素

Angular - access dynamically created form elements from controller

javascript

forms

angularjs

ng-repeat