Delete objects by index and not by order of creation in angular/javascript

Question

Objects i've named touts are being delete in order of creation not by id

The function to delete them is called deleteTouts()

Heres a live code:

jsFiddle link

HTML

<div ng-app="App">
  <div ng-controller="Controller" class="container">
    <button ng-click="addFields()">
          Add Field
    </button>
        <hr />
        <hr />
    <div class="row" ng-repeat="(keyField, keyVal) in fields">
        <input   ng-hide="true" value="field" ng-model="field.id" />
         <div>{{keyVal.id}} -- <span><a href="" ng-click="removeFields($index)">delete</a></span></div> 

         <div class="" ng-repeat="(keyTout, valTout) in fields[keyField].touts">

             <div class="captions">
                 <input value="field"  ng-model="valTout.caption" />
                 <input value="field"  ng-model="valTout.subCaption" />
                 <br/>
             </div>
             <button ng-click="deleteTouts(keyTout)">delete tout</button>       
        </div>
        <button ng-click="addTouts(keyField)">add tout</button>
            <hr />
    </div>

    <hr />
    <p class="well">fields: {{fields | json}}</p>
  </div>
</div>

JS

angular.module('App', []);

function Controller($scope) {
    $scope.friends = [];
    $scope.fields = [ 
        //'id': 0, touts: [{'caption': 'default caption', 'subCaption': 'default subcaption'}]
    ];


    $scope.addFields = function() {
       var idFields = $scope.fields.length == undefined ? 0 : $scope.fields.length ; 

       $scope.fields.push({id: idFields, touts: [{'caption': 'default caption', 'subCaption': 'default subcaption'}]});
    };
    $scope.removeFields = function(id) {

        $scope.fields.splice( $scope.fields.indexOf(id), 1 );
    };

    $scope.addTouts = function (id) {
        //alert(id);
        $scope.fields[id].touts.push({'caption': 'default caption', 'subCaption': 'default subcaption'});
    }
    $scope.deleteTouts = function (id) {
        //alert(id);
       $scope.fields[id].touts.splice( $scope.fields[id].touts.indexOf(id), 1 );
    }
}

DIRECTIONS:

Create 2 fields ->

create 2 touts in field[0] -> 

create 1 tout in field[1]

Now why when you delete from field[1]tout[0] using delete tout it deletes the first tout made.

This functionality is incorrect. lastly is there a better method of adding/subtracting? (directive)?

It appears you are calling the deleteTouts() method with the argument keyTout. I do not see where keyTout is defined anywhere in the app. As such wouldn't it be undefined, essentially 0? — JeffryHouser
– JeffryHouser, Commented Feb 13, 2014 at 21:58

Craig Squire · Accepted Answer · 2014-02-13 22:09:46Z

2

Your deleteTouts method needs to take 2 params. A field id and a tout id. Since you were just passing a tout id, you were always deleting the tout from the field with the same id.

Using two params and passing the field id in fixes it.

http://jsfiddle.net/4Weyg/

<button ng-click="deleteTouts(keyField, keyTout)">delete tout</button>  

$scope.deleteTouts = function (fieldid, id) {
   $scope.fields[fieldid].touts.splice( id, 1 );
}

edited Feb 13, 2014 at 22:09

answered Feb 13, 2014 at 21:55

Craig Squire

2,14114 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Abraham Over a year ago

hey craig if you were to make 4 touts in a field and name the touts 1,2,3,4 in the input fields... then delete tout with the value of 1. It why does the value say 1 inside the input?

Craig Squire Over a year ago

Updated the jsfiddle. Since you're passing back in index for the touts array, you don't want to use indexOf() because it will always return -1. jsfiddle.net/4Weyg

user2819648 · Accepted Answer · 2014-02-13 21:53:11Z

0

Still cannot command, so I have to post it as answer: Following is happening: your $scope.fields.indexOf(id) is returning -1 because you do not have any index in $scope.fields

You have to go trough all the fields and slice the right one with the right id out.

answered Feb 13, 2014 at 21:53

user2819648

Collectives™ on Stack Overflow

Delete objects by index and not by order of creation in angular/javascript

jsFiddle link

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related