CODEWITHSUNDEEP
javascriptarraysangularjs
Lokendra Singh Panwar
Lokendra Singh Panwar

Reputation: 511

How to splice variable value in AngularJS?

How to splice variable value in AngularJS

HTML:

<div ng-repeat="steps in data" class="card" style="padding:10px 5px 10px 5px; margin-bottom:10px; margin-top:20px; background: url(@routes.Assets.at("images/Assets/icon_move.png")) no-repeat right #FAFBFC; background-position : calc(100% - 10px) 50%;">
    {{steps.title}}
    <div class="pull-right"  ng-click="deleteStep(steps);"  style="color:#F26063; padding-right: 40px;">Delete</div>
    <a class="pull-right" ng-click="openAddStep('lg');" style="color:#43C944; padding-right: 20px;">Edit</a>
</div>

JavaScript:

$scope.deleteStep = function(steps){
    alert('h');
    for (var i = $scope.steps.length - 1; i >= 0; i--) {
        if (!$scope.steps[i].value) {
            $scope.steps.splice(i, 1);
        }
    }
}

Upvotes: 2

Views: 1084

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can pass the current index to the delete method and then splice it as below, another option is to find the index of the data object by using the indexOf method and splice it

<div class="pull-right"  ng-click="deleteStep($index);"  style="color:#F26063; padding-right: 40px;">Delete</div>

js

$scope.deleteStep = function(index){
                        $scope.data.splice(index, 1);
                    }


var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {

  $scope.data = [];
  for (var i = 0; i < 10; i++) {
    $scope.data.push({
      title: 'Title: ' + i
    });
  }

  $scope.deleteStep = function(index) {
    $scope.data.splice(index, 1);
  }
  $scope.deleteStep2 = function(steps) {
    $scope.data.splice($scope.data.indexOf(steps), 1);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="my-app">
  <div ng-controller="AppController">
    <div ng-repeat="steps in data" class="card" style="padding:10px 5px 10px 5px; margin-bottom:10px; margin-top:20px;">
      {{steps.title}}
      <div class="pull-right" ng-click="deleteStep($index);" style="color:#F26063; padding-right: 40px;">Delete</div>
      <div class="pull-right" ng-click="deleteStep2(steps);" style="color:#F26063; padding-right: 40px;">Delete 2</div>
      <a class="pull-right" ng-click="openAddStep('lg');" style="color:#43C944; padding-right: 20px;">Edit</a>
    </div>


  </div>
</div>

Upvotes: 1

Related Questions