如何删除列表项Angular

How to delete list item Angular?

本文关键字：列表 Angular 删除 何删除      更新时间：2023-09-26

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

angular.js:12416类型错误：无法读取未定义的属性"indexOf"
 nbsp nbsp 在m.$scope.removeCompany（app.js:21）
 nbsp nbsp at fn（eval at（angular.min.js:1），：4:334）
 nbsp nbsp 在f（angular.js:23371）
 nbsp nbsp 下午$eval（angular.js:15878）
 nbsp nbsp m.$apply（angular.js:15978）
 nbsp nbsp 位于HTMLAnchorElement。（angular.js:23376）
 nbsp nbsp 在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>

问题出在您的代码上。您将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;
    };
  });
})();

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

CCD_ 10。

在你的情况下，这意味着你在公司中搜索一个等于$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);
        };

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

相关文章：