CODEWITHSUNDEEP
javascriptangularjs
Nazar Vovk
Nazar Vovk

Reputation: 73

How to delete list item Angular?

When I click on button delete in console

angular.js:12416 TypeError: Cannot read property 'indexOf' of undefined
     at m.$scope.removeCompany (app.js:21)
     at fn (eval at (angular.min.js:1), :4:334)
     at f (angular.js:23371)
     at m.$eval (angular.js:15878)
     at m.$apply (angular.js:15978)
     at HTMLAnchorElement. (angular.js:23376)
     at HTMLAnchorElement.Hf.c (angular.js:3293)

if (!localStorage.getItem("companys")) {
  localStorage.setItem("companys", JSON.stringify([]));
};

(function() {
  var app = angular.module('myApp', []);

  app.controller('ListController', function($scope){
    this.retrieveCompanys = function() {
      return JSON.parse(localStorage.getItem('companys'));
    }

    this.addToStorage = function(company){
      this.companys.push(company);
      localStorage.setItem('companys', JSON.stringify(this.companys));
    }
    this.companys= this.retrieveCompanys();

     $scope.removeCompany = function (item) {
      debugger;
      var index= $scope.companys.indexOf(item);
      $scope.companys.splice(index,1);
    };

    $scope.add = false;
    $scope.togglechild = function() {
      $scope.add = !$scope.add;
    };

  });

})();

<html ng-app="myApp">

   <body  class="container" ng-controller="ListController as list">
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" ng-controller = "AddController as addCtrl">
        ...........
      </div>
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" >
         <h3 class="text-center">List of Company</h3>
         <table class="table">
            <tr>
               <th class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></th>
               <th class="col-xs-5 col-sm-5 col-md-5 col-lg-5">Name Company</th>
               <th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Own earnings</th>
               <th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Total earnings</th>
               <th class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">Edit/Delete</th>
            </tr>
            <tr ng-repeat="company in list.companys  track by $index">
              <td class="col-xs-1 col-sm-1 col-md-1 col-lg-1 text-center">
                <a href="#{{'demo'+$index}}" data-toggle="collapse"><span class="glyphicon glyphicon-eye-open"></span></a>
              </td>
               <td class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">

                  <b ng-hide="editing" ng-click="editing = true">{{company.name_company}}</b>
                  <form ng-show="editing" ng-submit="editing = false">
                   <button class="btn" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
                    <input type="text" ng-model="company.name_company" placeholder="Name" ng-required>

                  </form>
               </td>
               <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
                  <span  ng-hide="editing" ng-click="editing = true">{{company.annual_earnings + " $"}}</span>
                  <form ng-show="editing" ng-submit="editing = false">
                    <input type="text" ng-model="company.annual_earnings" placeholder="Annual earnings" ng-required>
                  </form>
               </td>
               <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">   
               </td>
               <td class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center">
                  <a ng-click="editing = true" title="Edit Data"><span class="glyphicon glyphicon-edit"></span></a>&ensp;
                  <a ng-click="removeCompany($index)" title="Delete"><span class="glyphicon glyphicon-remove-sign"></span></a>&ensp;
                  <a ng-click="togglechild()" title="Add Child Company"><span class="glyphicon glyphicon-plus-sign"></span></a>
               </td>

            </tr>          
         </table>
      </div>
   </body>
</html>

Upvotes: 0

Views: 264

Answers (2)

David
David

Reputation: 7105

The problem is with your code. You're storing the value of companys in this.companys instead of $scope.companys and you're attempting to access it with $scope.companys instead of this.companys. You shouldn't be using this. since then you're going to have to deal with scoping, instead use $scope.

if (!localStorage.getItem("companys")) {
  localStorage.setItem("companys", JSON.stringify([]));
};

(function() {
  var app = angular.module('myApp', []);

  app.controller('ListController', function($scope){
    function retrieveCompanys() {
      return JSON.parse(localStorage.getItem('companys'));
    }

    this.addToStorage = function(company){
      $scope.companys.push(company);
      localStorage.setItem('companys', JSON.stringify($scope.companys));
    }

    $scope.companys= retrieveCompanys();

     $scope.removeCompany = function (index) {
      $scope.companys.splice(index,1);
    };

    $scope.add = false;
    $scope.togglechild = function() {
      $scope.add = !$scope.add;
    };

  });

})();

Upvotes: 4

tomtom
tomtom

Reputation: 642

David is correct. But there is another problem. You are calling the function $scope.removeCompanywith $index as a parameter.

<a ng-click="removeCompany($index)" title="Delete">.

In your case that means you search through the companys looking for a value that is equal to $index. You will not find any and that will result in var index being equal to -1. And if you use splice with -1 as the first parameter you will always start the splice on the last item in the array.

$scope.removeCompany = function (item) {
  var index = $scope.companys.indexOf(item);
  $scope.companys.splice(index,1);
};

So you should either call removeCompany like this:

<a ng-click="removeCompany(company)" title="Delete">

Or change the code in your controller to:

$scope.removeCompany = function (index) {
          $scope.companys.splice(index,1);
        };

I would suggest changing how you call the function.

Upvotes: 0

Related Questions