0
我試圖根據他們的$索引拼出這個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數組中的最後一個項目。有任何想法嗎？
感謝Hardeep，請您再詳細一點介紹一下嗎？也許給一個建議我可以使用一些其他邏輯？ – JoshPMP
您的控制器需要解決所有數組問題，而不是您的HTML模板。假設，將來你會改變你的html文件，那麼你將需要咀嚼$ parent。$ parent ..等等。 通過$ index直接從html獲得子數組的索引，然後從你的控制器中定位該子數組，如$ scope.lineItems ['subLineItems'] ['rates'] [$ index]。 –
讓它住在普朗克或吉普德爾，我可以幫助你。 –