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

Question

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.

score 0 · Accepted Answer · answered Jun 09 '16 at 19:12

0

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"

answered Jun 09 '16 at 19:12

Drag13

5,859
1
18
42

Ah! carton is what it wants! Thank you. – DaveC426913 Jun 09 '16 at 19:22
Also found another, simpler solution that doesn't even need the controller - does it right in the DOM: – DaveC426913 Jun 09 '16 at 19:24
@DaveC426913 That splice solution is pretty sweet. Thanks for the tip. – circleofconfusion Jul 24 '18 at 20:36

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

1 Answers1