Question

我有一个在ng-repeat里面的表单，只有当我选择了必填字段时才需要启用（在这种情况下<select>下拉）。但不幸的是，这似乎不是working.Can任何人都建议可能解决此问题。

<form name="myForm">    
    <div ng-repeat="item in data">
        <select ng-model="name" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
        </select>    
        <button class="button" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
    </div>    
</form>

Answer 1

由于您的表单位于ng-repeat内，因此我会将多个表单绑定到$scope，其名称为myForm（已覆盖）

您应该为ng-repeat

中的每个表单添加不同的名称

示例：

<form name="myForm{{$index}}">

按下按钮：

 <button class="button" ng-click="save()" ng-disabled="myForm{{$index}}.$invalid">Save</button>

Answer 2

如果为每个select元素添加名称会更简单，这样您就可以单独引用字段错误：

<form name="myForm">
    <div ng-repeat="item in data">
        <select ng-model="name" name="name{{$index}}" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
        </select>
        <button class="button" ng-click="save()" ng-disabled="myForm['name' + $index].$invalid">Save</button>
    </div>
</form>

演示： http://plnkr.co/edit/RVY39iMv3dy96Cuw4q6B?p=info

Answer 3

使用ng-form指令，这里是DOC

<form name="myForm" novalidate>  
    <div ng-repeat="item in data">

        <ng-form name="testForm">
            <select ng-model="name" required ng-options="r.id as r.name for r in list">
            <option value="">--Select---</option>
            </select>    
            <button class="button" ng-click="save()" ng-disabled="testForm.$invalid">Save</button>
         </ng-form>

    </div>    
</form>

这是plunker

这是一个good explanation

在ng-repeat中使ng-disabled成为真

3 个答案: