Question

我有表格控制器，带有一些输入字段和复选框，当我点击保存并添加另一个项目按钮我一次复制（克隆）整个表单控制器。它可以多次完成。当我单击按钮

时，我正在创建一个数组推送表单元素

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

在窗体控制器里面我有复选框，当我点击复选框时，有一个名为数量的表单输入字段和添加另一个项目按钮。您可以使用它来创建n个数量。我正在使用另一个ng-重复将值推入另一个数组。

 $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个数量。每个父母都有独立的数量。当我从parent2中删除第二个数量时，它也将从父项1中删除。我想仅在父2和父1上单独删除，并添加量化字段。我完整的工作小提琴在这里codepen。任何人都提前为我提供解决方案

Answer 1

不要将mutlidimensional数组用于这种逻辑。 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动态创建ng-model和ng-repeat。$ index？

1 个答案: