DaveC426913 DaveC426913 - 1 year ago 400
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 Source

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"

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download