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 中不起作用

在 ng-repeat 中向 ng-click 函数添加参数似乎不起作用

Python-Flask中的render_template不起作用