Angular JS splice not working

Question

I have my data in products.json like this:

{
"products":[
{
     "name":"Antricot de vita",
     "calorii":236,
     "proteine":17.4,
     "lipide":18.5,
     "carbohidrati":0,
     "fibre":0
  },
  {
     "name":"Muschi de vita crud",
     "calorii":215,
     "proteine":19,
     "lipide":15,
     "carbohidrati":0,
     "fibre":0
  },
  {
     "name":"Albus de ou",
     "calorii":52,
     "proteine":10.9,
     "lipide":0.2,
     "carbohidrati":0.7,
     "fibre":0
  }
 ]
}

So, as you can see I have an array called products which comes with some objects each one having 6 properties. I have a table in which every tr has 6 tds with the properties mentioned. When clicked the button on right of each tr I want that tr to be deleted. The problem occures when I have to delete an element from the table. I have tried a splice function which seems not to work. Please help me fix this issue. Thank you so much! PS: The push function does work!

Below is my code: app.js

    var app = angular.module('Calorii', []);
    app.factory('products', ['$http', function($http) {
      return $http.get('products.json')
        .success(function(data) {
          return data;
        })
        .error(function(data) {
          console.log("error");
          return data;
        });
    }]);
    app.controller('HomeController', ['$scope', 'products', function($scope, products) {
      products.success(function(data) {
        $scope.produse = data;
        $scope.predicate = 'name';
        $scope.reverse = false;
        $scope.order = function(predicate) {
          $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
          $scope.predicate = predicate;
        };
        $scope.removeItem = function(item) {
          var index = $scope.produse.products.indexOf(item);
          $scope.produse.products.splice(index, 1);
        };
        $scope.add = function() {
          if (angular.isDefined($scope.name) && $scope.name != '' && $scope.calorii >= 0 &&
            $scope.proteine >= 0 && $scope.lipide >= 0 && $scope.carbohidrati >= 0 &&
            $scope.fibre >= 0) {
            $scope.produse.products.push({
              name: $scope.name,
              calorii: $scope.calorii,
              proteine: $scope.proteine,
              lipide: $scope.lipide,
              carbohidrati: $scope.carbohidrati,
              fibre: $scope.fibre
            });
            $scope.name = '';
            $scope.calorii = '';
            $scope.proteine = '';
            $scope.lipide = '';
            $scope.carbohidrati = '';
            $scope.fibre = '';
          } else {
            alert("Unul sau mai multe spatii nu a fost completat");
          }
        };
      });
    }]);
    app.directive('myElement', function() {
      return {
        scope: {
          item: '=myElement'
        },
        restrict: 'EA',
        template: '{{ item.name }}{{ item.calorii }}{{ item.proteine }}{{ item.lipide }}{{ item.carbohidrati }}{{ item.fibre }}'
      };
    });

index.html




  Calorii
    
    
   


  
    
      
      
        
        
        
        
          
        
        
      
      
    
        
          Doresc tabelul nesortat
           
          
          
            
            Aliment
            
            
            
              Calorii
              
            
            
              Proteine
              
            
            
              Lipide
              
            
            
              Carbohidrati
              
            
            
              Fibre
              
            
            Scoate din lista
          
          
        
        

        Nota: Toate valorile nutritive sunt calculate pentru o cantitate de 100g.
        Daca nu ai gasit alimentul cautat, adauga-l completand tabelul de mai jos:

        
        
          
            Aliment:
            

            exemplu: Pate de porc cu verdeturi Bucegi
          
          
            Calorii:
            

            completarea numarului de calorii este obligatorie
          
          
            Proteine:
            

            completarea numarului de proteine este obligatorie
          
          
            Lipide:
            

            completarea numarului de lipide este obligatorie
          
          
            Carbohidrati:
            

            completarea numarului de carbohidrati este obligatorie
          
          
            Fibre:
            

            completarea numarului de fibre este obligatorie

I know there is plenty of code above, but if you don't mind I would appreciate if you could explain shortly how to call splice function on my json products. Thanks again!

yBrodsky · Accepted Answer

indexOf sometimes fails to find the index of an object in an array. Either you use lodash or underscore to do so, or change your approach:

Remove

Ctrl

$scope.removeItem = function(index) {
   $scope.produse.products.splice(index, 1);
}

$index as available to you when using ng-repeat in angular.

Angular JS splice not working

Answers (2)

Related Questions