使用 $index 和 $parent.$index 在 ng-repeat 和 child ng-repeat 中动态创建 ng-model？

Question

当我单击“保存”并添加另一个项目按钮时，我有带有一些输入字段和复选框的表单控制器我正在一次复制（克隆）整个表单控制器。可以做n次。我正在创建一个数组，当我单击按钮时推送表单元素

 <div class="row category-description-block" ng-repeat="values in categoryval.CategoryValuesArray track by $index">
            <div class="col">
                <h3>Tell us about your jewelry</h3>
                <div class="list">
           <div class="form_group">
                        <label class="item item-input item-select">
                            <div class="input-label">
                                Type of Jewelry?
                            </div>
                              <span class="input-label"></span>
                            <input ng-model="categoryval.Luxary_Eyeware_Brand[$index]" type="text" placeholder="">
                        </label>
                    </div>




                    <!-- more details about jewelry starts -->
                <ion-checkbox ng-model="categoryval.jewelrymoreDetailschecked[$index]" ng-change="jewelrymoreDetailsChange($index)">I have the jewelry details
                        <br/> (Diamond shape, clarity, color, etc.)</ion-checkbox>

                    <div ng-show="IsVisible[$index]">

                        <div>
                            <div class="row">
                                <div class="col">
                                    <h4>Describe your diamonds</h4>
                                </div>
                            </div>



                            <div class="repeat-set card">
                                <!-- inner repeating div strats-->

                                <div class="repeat-div" ng-repeat="jewels in categoryval.moreJewelryDetailsArray track by $index">
                                    <div class="row close-icon-bg">
                                        <div class="col">
                                            <a href="" ng-model="jewels.closeItem[$parent.Sindex][$index]" ng-click="removeItem($parent.$index,$index)" class="close-icon">remove</a>
                                        </div>
                                    </div>
                                    <div class="row ">
                                        <div class="col">
                                            <div class="form_group">
                                                <label class="item item-input item-stacked-label">
                                                    <span class="input-label">Quantity </span>
                                                    <input ng-model="jewels.quantity[$parent.$index][$index]" type="text" placeholder="Quantity">
                                                </label>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- inner repeating div Ends-->



                                <div class="form_group text-center">
                                    <label class="item item-input item-stacked-label">
                                        <button class="button button-small button-royal" ng-click="addJewelryDetails($index)">Add an additional item</button>
                                    </label>
                                </div>


                    <div class="form_group">
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Description</span>
                            <textarea ng-model="categoryval.description[$index]" placeholder=""></textarea>
                            <p class="form-notes">The more information you provide, the better!</p>
                        </label>
                    </div>



                </div>
            </div>
        </div>



        <div class="row custom-button">
            <div class="col-25">
                <button class="button button-block button-balanced" ng-click="categoryContinue(categoryval)">Continue</button>
            </div>
            <div class="col">
                <button class="button button-block button-balanced" ng-click="globalAppend()">Save and add another item</button>
            </div>
        </div>
    </div>

在表单控制器中，当我单击复选框时，我有一个复选框，有一个 form-input 字段称为数量并添加另一个项目 button.You 可以使用它来创建 n 个 quantity.I 我正在使用一个 ng-repeat 将值推入另一个数组。

 $scope.addJewelryDetails = newJewelryDetails;
$scope.globalAppend = newGlobalDiv;


$scope.IsVisible = [];
$scope.categoryval = {
    jewelrymoreDetailschecked: false
};

$scope.jewelrymoreDetailsChange = function(index) {
    $scope.IsVisible[index] = $scope.categoryval.jewelrymoreDetailschecked[index];

};


$scope.categoryContinue = function(categoryvalues) {
    console.log(categoryvalues);
};



       $scope.categoryval = {};
     // $scope.categoryval.jewelryCollection = {};
    $scope.categoryval.images = [];
     $scope.categoryval.CategoryValuesArray = [];
      $scope.categoryval.moreJewelryDetailsArray = [];
      $scope.categoryval.quantity = [];

function init() {

    newJewelryDetails();
    newGlobalDiv();
}

function newGlobalDiv() {

    $scope.categoryval.CategoryValuesArray.push({});
}

function newJewelryDetails(parentindex) {

    $scope.categoryval.moreJewelryDetailsArray.push({});
    $scope.quantity = '';

}
$scope.removeItem = function(parentindex,index) {
    console.log(JSON.stringify(parentindex));

   $log.log("parent Index:::" + parentindex + "index::::" +  index);


  //var quantity =       $scope.categoryval.moreJewelryDetailsArray[index].quantity;     
   $scope.categoryval.moreJewelryDetailsArray.splice(index,1);

};  


init();

但我对数量字段的添加和删除有疑问。例如 Parent1 有 3 个数量字段，parent2 有 3 个数量。每个 parent 都有独立的数量。当我从 parent2 中删除第二个数量时，它也会从 parent1 中删除。我只想单独删除 parent 2 和 parent1 并添加数量字段。我的完整工作 fiddle 在这里 codepen。任何人为我提供解决方案提前感谢

Answer 1

不要为这种逻辑使用多维数组。 Javascript/Json 适合这份工作。

您应该有一个包含项目列表的珠宝数组：

[
  {
    items: [{name: "", description: ""}, {name: "", description: ""}]
  },
  {
    items: [{name: "", description: ""}, {name: "", description: ""}]
  }
]

您以相同的方式删除项目：

$scope.removeItem = function(parentindex,index) {
   $scope.jewelryArray[parentIndex].items.splice(index,1);
};

概念验证：https://plnkr.co/edit/PLTFDvHszXrTWA7rrjcf?p=preview

编辑：根据评论完成 plunker。

https://plnkr.co/edit/crLzfRKFA2FrhRhXLcGY?p=preview

使用 $index 和 $parent.$index 在 ng-repeat 和 child ng-repeat 中动态创建 ng-model？

create ng-model dynamically in ng-repeat and child ng-repeat using $index and $parent.$index?

dynamic

angularjs

ng-repeat

ionic-framework

angular-ngmodel