【发布时间】：2017-02-11 00:14:06
【问题描述】：
当我单击保存并添加另一个项目按钮时，我有一些输入字段和复选框的表单控制器，我一次复制（克隆）整个表单控制器。可以做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>
在里面的表单控制器中，当我单击复选框时，我有一个复选框，有一个名为数量的表单输入字段并添加另一个项目按钮。您可以使用它来创建 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 个 Quantities 字段，而 parent2 有 3 个 quantity 。每个父母都有独立的数量。当我从 parent2 中删除第二个数量时，它也会从 parent 1 中删除。我只想单独删除父 2 和 parent1 并添加数量字段。我完整的工作小提琴在这里codepen。任何人为我提供解决方案提前谢谢
【问题讨论】：
标签： angularjs dynamic ionic-framework ng-repeat angular-ngmodel