ng-repeat 中的角度验证不起作用
Posted
技术标签:
【中文标题】ng-repeat 中的角度验证不起作用【英文标题】:Angular validation in an ng-repeat not working 【发布时间】:2014-05-03 18:22:21 【问题描述】:我很难使用 ng-repeat 语句进行验证。我有以下代码。我只想在名称字段为空时将 has-error 添加到 div.form-group 中。我似乎无法让它工作。有什么想法吗?
My Attempt in fiddler
<div ng-app="app" ng-controller="bookController">
<form name="myForm" ng-submit="submitMe(this)" novalidate>
<table class="table">
<tr ng-repeat="order in orders">
<ng-form name="innerForm">
<td> order.id </td>
<td>
<div class="form-group" ng-class=" 'has-error' : innerForm.name.$invalid && submitted ">
<input type="input" ng-model="order.name" name="name" required />
</div>
</td>
</ng-form>
</tr>
</table>
<input type="submit" value="submit" ng-click="submitted = true" />
</form>
<pre>
orders | json
</pre>
</div>
var app = angular.module("app", []);
app.controller("bookController", function ($scope)
$scope.submitMe = function(form)
console.log(form);
;
$scope.orders = [
id: 1,
name: ''
,
id: 2,
name: 'hat'
];
);
【问题讨论】:
嵌套ng-form有原因吗? 因为不能动态生成表单输入元素的“name”属性,他需要这个属性来验证docs.angularjs.org/api/ng/directive/form。另见***.com/questions/12044277/… 【参考方案1】:将ngForm
指令移动到包含ngRepeat
指令的元素:
<tr ng-repeat="order in orders" ng-form="innerForm">
演示: http://jsfiddle.net/YTR95/
【讨论】:
在 Angular 1.3.15 中,我无法让它工作。以这种方式使用时,ng-form 不会拾取父表单。我以前用它成功过,但在一张桌子上,这不起作用。以上是关于ng-repeat 中的角度验证不起作用的主要内容,如果未能解决你的问题,请参考以下文章
ng-repeat 排序箭头在 javascript 数据表中不起作用
ng-repeat 上的 Angularjs OrderBy 不起作用
Jquery md-timepicker 在 ng-repeat 中不起作用