[英]Angular - access dynamically created form elements from controller
我有一个用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内调用它。 您需要它来等待下一个角度的摘要循环 。 在内部$ timeout将调用$ apply,它将强制同步两种方式的数据绑定。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.