我正在尝试根据$ index对这个ng-repeat中的项目进行拼接。它可以很好地添加它们,但是当我尝试使用相同的代码删除该项时,它只删除数组的最后一项,就好像它正在执行pop()方法一样。我不知道为什么。这是我的目标,我正在重复:
"lineItems": [
{
"area": "Bedroom",
"label": "Sleep Time",
"notes": "",
"pictures": [],
"subLineItems": [
{
"label": "Flooring",
"data": {
"rates": [
{
"label": "Damaged",
"value": "1",
"color": "damaged-red"
},
{
"label": "Poor",
"value": "2",
"color": "poor-orange"
},
{
"label": "Dirty",
"value": "3",
"color": "dirty-yellow"
},
{
"label": "Fair",
"value": "4",
"color": "fair-light-blue"
},
{
"label": "Good",
"value": "5",
"color": "good-green"
}
]
},
"items": [
[
{
"uuid": "6f5fed0c-db03-41a0-a575-15af3ad3",
"label": "Hot Water Tank",
"selected": false,
"price": 500,
"labor": [
{
"uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
"label": "Install Carpet Basic",
"selected": false,
"price": "1.00"
},
{
"uuid": "a696faca-197a-4fd9-972c-05f197f4",
"label": "Install Trim Basic",
"selected": false,
"price": "0.50"
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
},
{
"uuid": "7815a160-7b70-48d1-ba32-8c232654",
"label": "Ceiling Fan Replacement",
"selected": false,
"price": 175,
"labor": [
{
"uuid": "8b9f9ea2-b163-45c0-9a80-087a8e16",
"label": "Install Carpet Basic",
"selected": false,
"price": "1.00"
},
{
"uuid": "a696faca-197a-4fd9-972c-05f197f4",
"label": "Install Trim Basic",
"selected": false,
"price": "0.50"
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
},
{
"uuid": null,
"label": "Select",
"selected": true
}
]
],
"rate": null,
"notes": null,
"pictures": []
}
这是我的HTML:
<ul class="list-inline col-xs-12">
<form class="form-inline col-xs-12" id="expenseForm">
<!-- li = items[0].array -->
<li ng-repeat="item in subLineItem.items track by $index" class="bouncy-slide-left" ng-class-even="'even-stripe'">
<!-- MATERIALS -->
<div class="form-group col-xs-3" style="margin-left: 0px !important">
<label for="material">{{labels.material.label}}</label>
<br>
<select name="material" class="form-control" ng-model="expense.mat.item" style="width: 125px">
<option value="{{mat.uuid}}" ng-repeat="mat in item" ng-selected="mat.selected">{{mat.label}}</option>
</select>
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_qty.label}}</label>
<br>
<input type="text" ng-model="item.mat.qty" class="form-control" name="quantity" placeholder="{{labels.material_qty.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_cost.label}}</label>
<br>
<input type="text" ng-model="expense.mat.price" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.totals.total}}</label>
<br>
<input type="text" ng-model="expense.mat.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px; overflow: scroll">
</div>
<div class="icon-str col-xs-1" style="padding-left: 0px" ng-click="removeItem($parent.$parent.$index, $parent.$index, $index)">
<label for=""></label>
<br>
<i class="fa-trash delete-inspec"></i>
</div>
<!-- LABOR ITEMS -->
<div class="form-group col-xs-3">
<label for="labor">{{labels.labor.label}}</label>
<br>
<select name="labor" class="form-control" ng-model="item.lab.item" style="width: 125px">
<option value="{{lab.uuid}}" ng-repeat="lab in item[0].labor" ng-selected="lab.selected">{{lab.label}}</option>
</select>
</div>
<div class="form-group col-xs-2">
<label>{{labels.material_qty.label}}</label>
<br>
<input type="text" ng-model="item.lab.qty" class="form-control" name="hours" placeholder="{{labels.labor_qty.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<div class="form-group col-xs-2">
<label>{{labels.labor_cost.label}}</label>
<br>
<input type="text" ng-model="item.lab.price" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<div class="form-group col-xs-2 ">
<label>{{labels.totals.total}}</label>
<br>
<input type="text" ng-model="item.lab.total" class="form-control" name="labor" placeholder="{{labels.labor_cost.placeholder}}" style="width: 55px;overflow: scroll">
</div>
<!-- RESPONSIBLE PARTY -->
<div class="form-group row col-xs-12" style="margin-left:0px !important; padding-left: 0px; padding-bottom: 10px; border-bottom: 2px solid #888">
<div class="col-xs-5 text-left" style="padding-right: 0px">
<label for="expenses">{{labels.responsible.label}}</label>
<br>
<select name="expenses" ng-model="expense.responsible" class="form-control" style="width: 200px">
<option value="{{resp.value}}" ng-repeat="resp in labels.responsibleParty" ng-selected="resp.selected">{{resp.label}}</option>
</select>
</div>
</div>
</li>
</form>
</ul>
这是我的控制器:
//add line item when NEW button is pressed
$scope.add = function(a, b){
//create the source of the copy, and where you want to send it (destination is a blank array)
var mySource = $scope.lineItems[0].subLineItems[0].items[0];
var myDestination = [];
//copy the source and send it to destination
angular.extend( myDestination, mySource);
//push that newly built array into the array
$scope.lineItems[a].subLineItems[b].items.push(myDestination);
//show the updated version of that array
console.log( $scope.lineItems[a].subLineItems[b].items);
};
//remove item from array
$scope.removeItem = function(a, b, c){
console.log(a, b, c);
$scope.lineItems[a].subLineItems[b].items.splice(c, 1);
console.warn($scope.lineItems[a].subLineItems[b].items);
};
这会在控制台中输出正确的数字,但实际上会删除items数组中的最后一项。任何想法?
答案 0 :(得分:0)
问题在于您的父标记。
removeItem($parent.$parent.$index, $parent.$index, $index)
这里,$parent
是根据你的html中的分区而不是根据数组。
尝试一些其他逻辑来定位子阵列。