我有一个简单的表单,由 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 循环中打印具体元素时,它会记录“未定义”。当我添加更多元素时,最后一个(当前添加的)总是在第一个日志中定义,但在第二个日志中未定义。你知道为什么吗?
最佳答案
我制作了一个 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 并强制同步双向数据绑定(bind)。
关于javascript - Angular - 从 Controller 访问动态创建的表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37441785/