如何在 html 中使用带有索引的 ng-repeat答案

【问题标题】：How to use ng-repeat with indexes in html如何在 html 中使用带有索引的 ng-repeat
【发布时间】：2017-01-20 14:54:10
【问题描述】：

我遇到了一个很难解释的案例，所以我把屏幕截图如下

案例：1-

最初，当我单击附加字段时，我会得到如下所示的标题 div，

案例：2-

当我点击添加按钮时，我会显示字段，如下所示

案例：3- 当我单击标题按钮时，只有标题应该出现，但第一个字段也会出现，这是一个错误。

我的html，

<div class="input-field col s12">
                   <fieldset  data-ng-repeat="addon in Addonchoice">
                        <div class="input-field col s8">
                            <input type="text" id="addonheader" ng-model="addon.heading" class="form-control" required>

                            <label for="heading">Heading<span class="error_red">*</span></label>

                            <xt-validation-inline for="addonheader"></xt-validation-inline>
                        </div>
                        <div class="input-field col s4">
                            <button  type = "button" class="btn addfields" ng-click="addonsdata()">ADD</button>
                            <button  ng-click="removeAddons('default_status',$index)" class="btn btn-danger">Remove</button>
                        </div>
                        <div class="input-field col s12">
                            <fieldset data-ng-repeat="addondata in Addondata">
                                <div class="input-field col s4">
                                    <input type="text" id="addonname" ng-model="addondata.name" class="form-control" required>

                                    <label for="name">Name<span class="error_red">*</span></label>

                                    <xt-validation-inline for="addonname"></xt-validation-inline>
                                </div>
                                <div class="input-field col s4">
                                    <input type="text" id="addonprice" ng-model="addondata.price" class="form-control" required>

                                    <label for="price">Price<span class="error_red">*</span></label>

                                    <xt-validation-inline for="addonprice"></xt-validation-inline>
                                </div>
                                <div class="input-field col s4">
                                     <button  type = "button" class="btn addfields" ng-click="addonsdata()">ADD</button>
                                    <button  type = "button" class="btn btn-danger" ng-click="()">Remove</button>
                                </div>
                            </fieldset>   
                        </div>
                   </fieldset>
                </div>
                <button type = "button" class="btn addfields" ng-click="addAddons()">Add Add-ons fields</button>

我的js，

$scope.addAddons = function(){
        var newItemNo = $scope.Addonchoice.length+1;
        $scope.Addonchoice.push({});
    }
    $scope.addonsdata = function(){
        var newItemNo = $scope.Addondata.length+1;
        $scope.Addondata.push({});
    }

我知道这是因为相同的数组被重复，索引可能对我有帮助。任何人都可以建议帮助。谢谢。

【问题讨论】：

标签： javascript angularjs html angularjs-ng-repeat

【解决方案1】：

使用 ng-form。请参阅下面的示例。

 <form name="addForm" novalidate>
<div ng-repeat="item in items">
   <ng-form name="addFieldForm">         
<div class="input-field col s12">
                            <fieldset data-ng-repeat="addondata in Addondata">
                                <div class="input-field col s4">
                                    <input type="text" id="addonname" ng-model="addondata.name" name="addonname" class="form-control" required>
<span ng-show="addFieldForm.addonname.$error.required">required</span>

                                    <label for="name">Name<span class="error_red">*</span></label>

                                    <xt-validation-inline for="addonname"></xt-validation-inline>
                                </div>
                                <div class="input-field col s4">
                                    <input type="text" id="addonprice" ng-model="addondata.price" class="form-control" name="price" required>
<span ng-show="addFieldForm.price.$error.required">required</span>

                                    <label for="price">Price<span class="error_red">*</span></label>

                                    <xt-validation-inline for="addonprice"></xt-validation-inline>
                                </div>
                                <div class="input-field col s4">
                                     <button  type = "button" class="btn addfields" ng-click="addonsdata()" ng-disabled="addFieldForm.$error">ADD</button>
                                    <button  type = "button" class="btn btn-danger" ng-click="()">Remove</button>
                                </div>
                            </fieldset>   
                        </div>
   </ng-form>
</div>
<input type="submit" ng-disabled="addForm.$invalid" value="Add Add-ons fields"/>
</form>

【讨论】：