CODEWITHSUNDEEP
javascriptangularjsrepeat
CountGradsky
CountGradsky

Reputation: 268

Splicing array nested within ng-repeat,

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.

Upvotes: 2

Views: 696

Answers (3)

MarcoS
MarcoS

Reputation: 17721

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...

Upvotes: 3

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 3

FajitaNachos
FajitaNachos

Reputation: 1020

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

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

Upvotes: 1

Related Questions