Liste öğesi nasıl silinir Angular?

Ben sorun koduyla olan konsolunListe öğesi nasıl silinir Angular?

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>

kaynak

2016-03-28 Nazar Vovk

hep this.companys' 'değerleri depolamak ama şimdi ben TypeError var $ scope.companys' – S4beR

silmek butonuna tıkladığınızda.yerinenumaralı telefona companys değerini kaydediyorsunuz ve this.companys yerine $scope.companys ile erişmeye çalışıyorsunuz. this.'u kullanmamalısınız, o zamandan beri kapsam belirleme ile uğraşmak zorunda kalacaksınız, bunun yerine $scope kullanın.

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; 
    }; 

    }); 

})();

kaynak

2016-03-28 17:10:24 David

' dan siliyorsunuz: TypeError this.retrieveCompanys bir işlev –

değildir ve şimdi var: this.retrieveCompanys değil Bir işlev –

Bunun yerine $ scope.retrieveCompanys() yazın. Ve işlevi oluşturduğunuzda removeCompany ile aynı sözdizimini kullanın: $ scope.retrieveCompanys = function() Ayrıca benim cevabımın bir aşağıya bakın. – tomtom

David doğrudur. Ama başka bir sorun var. $scope.removeCompany işlevini $index parametresiyle çağırıyorsunuz.

<a ng-click="removeCompany($index)" title="Delete">. Bu durumda, $index'a eşit bir değer arayan şirketler arasında arama yaptığınız anlamına gelir. Hiçbiri bulamayacaksınız ve bu, var index'un -1'e eşit olmasıyla sonuçlanacaktır. Ve ilk parametre olarak -1 ile splice kullanırsanız, her zaman dizideki son öğe üzerindeki eklemeye başlayacaksınız.

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

Veya sizin denetleyicisi kodunu değiştirmek:

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

Yani böyle removeCompany çağırmalıdır ya sana işlevi çağırmak nasıl değişiyor öneririm

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

kaynak

2016-03-28 17:44:15 tomtom

Liste öğesi nasıl silinir Angular?

cevap

İlgili konular