DaveC426913 DaveC426913 - 6 months ago 190
AngularJS Question

deleting an angular object from an array - $$hashKey?

I have a dialogue that adds a Master Carton to an array of Master Cartons.

A repeater shows 1 or more Master Cartons:

<div ng-repeat="carton in dimensionsModalVm.masterCartons">
<div class="form-group">
<label class="control-label col-md-3">Length</label>
<div class="col-md-9">
<input name="length" min="0" max="999" class="form-control input-inline input-xs" type="number" placeholder="Enter Length" ng-model="carton.dimensions.length" required /> inches
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Weight</label>
<div class="col-md-9">
<input name="weight" min="0" max="999" class="form-control input-inline input-xs" type="number" placeholder="Enter Weight" ng-model="carton.dimensions.weight" required /> pounds
</div>
</div>
</div>
</div>
</div>

<button class="btn btn-default" ng-click=" dimensionsModalVm.addMasterCarton()" type="button">Add another master carton</button>


My creation of the first MC on page init is called

function dimensionsModalInstanceController($http, $uibModal, $uibModalInstance, toastr, cart, masterCarton, CartObservable) {

vm.addMasterCarton = function () {
vm.masterCartons.push({
length: 0,
weight: 0
});
};
vm.addMasterCarton();


((
For what it's worth, dimensionsModalInstanceController is created within the previous modal's controller here - so dimensionsModalInstanceController is dimensionsModalVm:

function masterCartonModalInstanceController($uibModal, $uibModalInstance, cart) {
vm.yes = function(size) {
var modalInstance = $uibModal.open({
templateUrl: 'dimensionsModalContent',
controller: 'dimensionsModalInstanceController',
controllerAs: 'dimensionsModalVm',
...


))

To add another MC, the button simply calls vm.addMasterCarton.

...

Now I want to be able to delete a MC. I've added a [X] in the corner of each MC.

<div ng-repeat="carton in dimensionsModalVm.masterCartons">
<button class="btn btn-default pull-right" type="button" ng-click="dimensionsModalVm.deleteMasterCarton(this)">X</button>

vm.deleteMasterCarton = function (obj) {
console.log(obj.carton);
console.log(vm.masterCartons);
};


My output is:

Object {length: 1, weight: 1, $$hashKey: "object:51"}


and

Object array
[
{
$$hashKey: "object:33",
length: 1,
weight: 1
},{

$$hashKey: "object:51",
length: 1,
weight: 1
}
]


How do I tell it to delete the object from the array? I see matching $$hashKeys, but I'm not sure what to do with them.

I don't want to have to invent a unique ID to track them.

If I used track by index on my MC repeater, would they get out-of-place as I delete them?

This article:
How do I delete an item or object from an array using ng-click?

suggests this should work:

var index = vm.masterCartons.indexOf(obj);
vm.masterCartons.splice(index, 1);


Unfortunately, it does not delete the right one.

Answer

First of all. Using track by ... ($index, id, etc) is always good idea. You do not need to worry about track by and possible issues for your list. Second.

Change

dimensionsModalVm.deleteMasterCarton(this)

to

dimensionsModalVm.deleteMasterCarton(carton)

and try again with "index of"