在ng repeat中使ng disabled为true

Making ng-disabled true inside ng-repeat

本文关键字：ng true disabled 中使 repeat      更新时间：2023-09-26

我有一个在ng repeat中的表单，只有当我选择了所需字段时，我才需要启用它（在本例中为<select>下拉菜单）。但不幸的是，这似乎不起作用。有人能提出一个可能的解决方案吗。

<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>

使用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

这里有一个很好的解释

因为表单在ng-repeat中，所以会有多个表单绑定到名为myForm（覆盖）的$scope

您应该在ng-repeat 中为每个表单添加不同的名称

示例：

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

在你的按钮上：

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

如果为每个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

相关文章：