Splicing array nested within ng-repeat,

Question

The array is structured like so

  $scope.structure = {
    sections: [{
      id:0,
      sectionItems: []
    },{
      id:1,
      sectionItems: []
    },{
      id:2,
      sectionItems: []
    }]
};

I have a nested ng-repeat so I can show items within sectionItems[] (Inside should be objects and one of the keys is Name - not relevant)

<div ng-repeat="sections in structure.sections" class="col-md-12">
   <div class="panel panel-info">
    <ul class="screenW-section">
        <li class="col-xs-6" ng-repeat="item in sections.sectionItems" 
         ng-click="item.splice($index, 1)">
            {{item.Name}}
        </li>
    </ul>
</div> </div>

I want to be able to remove items on click but the ng-click="item.splice($index, 1) Is not working no matter how I format it.

All of your stuff works, problem was in another part of a code — CountGradsky
– CountGradsky, Commented Apr 26, 2016 at 15:30

Hadi · Accepted Answer · 2016-04-26 15:19:33Z

3

try this:

var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
  $scope.structure = {
    sections: [{
      id:0,
      sectionItems: ['1','2','3']
    },{
      id:1,
      sectionItems: ['11','21','32']
    },{
      id:2,
      sectionItems: ['12','22','32']
    }]
};
  
  
  $scope.remove = function(sectionItems,index){
     sectionItems.splice(index, 1);     
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">

  <div ng-repeat="sections in structure.sections" class="col-md-12">
   <div class="panel panel-info">
    <ul class="screenW-section">
        <li class="col-xs-6" ng-repeat="item in sections.sectionItems" 
         ng-click="remove(sections.sectionItems,$index)">
            {{item}}
        </li>
    </ul>
</div> </div>

</div>

edited Apr 26, 2016 at 15:19

answered Apr 26, 2016 at 15:10

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

Comments

MarcoS · Accepted Answer · 2016-04-26 15:23:32Z

3

To remove an item you need to remove it from the array.
So, for example, you could do

ng-click="remove(sections.sectionItems, $index)"

in the view, and

$scope.remove = function(array, index) { 
  array.splice(index, 1);     
}

in the controller...

edited Apr 26, 2016 at 15:23

answered Apr 26, 2016 at 15:04

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

4 Comments

CountGradsky Over a year ago

"sections" and "sectionItems" are arrays and cannot be referenced that way.

FajitaNachos Over a year ago

Since it's nested you would need the index of both the section and the sectionItem. In other words, you need a reference to the correct section also in your answer.

MarcoS Over a year ago

@CountGradsky: you are using it as objects in the view you show... Am I wrong?

CountGradsky Over a year ago

@MarcoS maybe you ment $scope.structure.sections[n].sectionItems.splice(index, 1);

FajitaNachos · Accepted Answer · 2016-04-26 15:07:11Z

1

You're calling splice on the item and not the array

ng-click="sections.sectionItems.splice($index, 1)"

answered Apr 26, 2016 at 15:07

FajitaNachos

1,0209 silver badges22 bronze badges

1 Comment

CountGradsky Over a year ago

I am getting "TypeError: scope.$eval(...).splice is not a function" on every solution

Collectives™ on Stack Overflow

Splicing array nested within ng-repeat,

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related