How to remove from an array in an angular directive

Question

I have some code which is working to add and remove entries to and from arrays in my scope. Right now the code isn't reused but rather cut/pasted and tweaked. Also, it rather naughtily uses scope inheritance to access the array. I'm trying to create a directive that will fix these two problems. The directive works fine as long as I add entries to the array. As soon as I remove an entry I appear to break the bi-directional binding. Any clues as to how I should go about this?

Fiddle is here.

It shows the SkillsCtrl which is the old code, and ListEditCtrl which is the new (reproduced below from the fiddle). Adding an entry to either list will update both but removing an entry from either list breaks the binding.

function SkillsCtrl($scope) {
  $scope.addSkill = function () {
      $scope.profile.skills = $scope.profile.skills || [];
      $scope.profile.skills.push($scope.newskill);
      $scope.newskill = "";
  };

  $scope.removeSkill = function () {
      $scope.profile.skills = _.without($scope.profile.skills, this.skill);
  };
}

function ListEditorCtrl($scope) {
  $scope.addItem = function () {
      $scope.list = $scope.list || [];
      $scope.list.push($scope.newitem);
      $scope.newitem = "";
  };

  $scope.removeItem = function () {
      $scope.list = _.without($scope.list, this.item);
  };
}

where is your newitem object?

Maxim Shoustin
– Maxim Shoustin

2013-05-22 09:56:37 +00:00
Commented May 22, 2013 at 9:56 — Maxim Shoustin
– Maxim Shoustin, Commented May 22, 2013 at 9:56
In the template for the directive.

axzr
– axzr

2013-05-22 10:06:16 +00:00
Commented May 22, 2013 at 10:06 — axzr
– axzr, Commented May 22, 2013 at 10:06
Please, add directive to your question from Fiddle

Maxim Shoustin
– Maxim Shoustin

2013-05-22 10:08:07 +00:00
Commented May 22, 2013 at 10:08 — Maxim Shoustin
– Maxim Shoustin, Commented May 22, 2013 at 10:08

joakimbl · Accepted Answer · 2013-05-22 10:20:18Z

4

It's because you use http://underscorejs.org/#without, which creates a copy of the array instead of just removing the item. When you remove an item a new array will be linked to the scope, and the new array is not linked with array in the isolate scope.

To solve this problem you can use splice instead, which removes the item from the original array:

$scope.removeSkill = function() {
    $scope.profile.skills.splice(_.indexOf($scope.profile.skills, this.skill),1);
};

...

$scope.removeItem = function() {
    $scope.list.splice(_.indexOf($scope.list, this.item),1);
};

Updated plunker: http://jsfiddle.net/jtjf2/

edited May 22, 2013 at 10:20

answered May 22, 2013 at 10:08

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

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

2 Comments

TheHippo Over a year ago

Some times I feel like underscore becomes the new jQuery. Libraries for mostly trivial tasks.

joakimbl Over a year ago

Yes, unfortunately IE8 doesn't have indexOf() in the Array prototype :/

Collectives™ on Stack Overflow

How to remove from an array in an angular directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related