Question

当我点击控制台中的按钮删除

时

angular.js：12416 TypeError：无法读取未定义的属性'indexOf'       at m。$ scope.removeCompany（app.js：21）
      at fn（eval at（angular.min.js：1），：4：334）
      在f（angular.js：23371）
      at m。$ eval（angular.js：15878）
      at m。$ apply（angular.js：15978）
      在HTMLAnchorElement。（angular.js：23376）
      在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>

Answer 1

问题在于您的代码。您将companys的值存储在this.companys而不是$scope.companys，并且您尝试使用$scope.companys而不是this.companys来访问它。您不应该使用this.，因为那时您将不得不处理范围，而是使用$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;
    };

  });

})();

Answer 2

大卫是对的。但还有另一个问题。您正在使用$scope.removeCompany作为参数调用函数$index。

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

在您的情况下，这意味着您搜索公司，寻找等于$index的值。您将找不到任何内容，这将导致var index等于-1。如果你使用splice和-1作为第一个参数，你将始终在数组的最后一项上开始拼接。

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

所以你应该像这样调用removeCompany：

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

或者将控制器中的代码更改为：

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

我建议改变你调用函数的方式。

如何删除列表项Angular？

2 个答案: