Home / Questions / 92499
Accepted
Dimoreno
Asked: 2020-08-03 20:46:47 +0800 CST 2020-08-03 20:46:47 +0800 CST

Error in array with Angularjs

  • 772

I have two arrayswhich contain certain values ​​the first arrayis predefined and the second arrayis equal to the first array. The second arrayitself is an arrayauxiliary which I use to remove elements. The error I have is that when I remove elements from the second arraythe elements from the first are also deleted array, This is my code:

At the time of verifying my arrayit is empty. How can I resolve this error? and here my jsfiddle

function Ctrl($scope) { 

  $scope.categorias = [{"id_categoria":2,"id_empresa":2},{"id_categoria":3,"id_empresa":2}];
  $scope.categorias_Aux = $scope.categorias;

  $scope.eliminar_categoria = function(id_categoria){
    for (var i = 0; i < $scope.categorias_Aux.length; i++){
      if ($scope.categorias_Aux[i].id_categoria == id_categoria) { 
          $scope.categorias_Aux.splice(i, 1);
          break;
      }
    }
    console.log(JSON.stringify($scope.categorias))

    }

  $scope.verificar = function(){
    $scope.categorias_Aux = $scope.categorias;
    console.log(JSON.stringify($scope.categorias_Aux))
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Ctrl">
    <table style="width:100%">
      <tr>
        <th>Nom</th>
        <th>id</th> 
        <th>accion</th>
      </tr>
      <tr ng-repeat="i in categorias_Aux">
        <td>nombre cat</td>
        <td>{{i.id_categoria}}</td> 
        <td><input type="button" value="x" ng-click="eliminar_categoria(i.id_categoria)"></td>
      </tr>
    </table>
    <input type="button" ng-click="verificar()">
  </div>
</div>

angularjs

2 Answers

  1. The problem you have is that when you do, $scope.categorias_Aux = $scope.categorias;you are also copying the reference in memory of $scope.categoriasa $scope.categorias_Auxin such a way that what you do to one will affect both.

    To clone the array, you would initialize the array $scope.categorias_Aux = []and then iterate over the original array and insert the data.

    Or in a more optimal way, $scope.categorias_Aux = $scope.categorias.slice(0);it will also copy the data, without copying the reference.

    Difference between Shallow copy and Deep copy

    • 3
  2. Best Answer

    I have changed the code somewhat to make it more visual. I've been giving it a thousand times, and the only thing I've found is that instead of matching them with =you have to use .copy(). Since with the first it is as if you were related and with the second they are two separate elements. Font

    PS: for more information about copy, I have posted a question

    angular.module('app', [])

    .controller('contactController', function ($scope) {
    
    $scope.categorias = [{"id_categoria":2,"id_empresa":2},{"id_categoria":3,"id_empresa":2}];
    $scope.categorias_aux = angular.copy($scope.categorias);

    $scope.delete = function (item) {
        console.log(item);
            var itemIndex;
            var confirmDelete = confirm("Realmente quieres elminar el elemento con id_categoria " + item.id_categoria + " ?");
            if (confirmDelete) {
                angular.forEach($scope.categorias_aux, function(contact, index) {
                    if(item.id === contact.id) {
                        itemIndex = index;
                    }
                });

                $scope.categorias_aux.splice(itemIndex, 1);
            }
    }
})
    table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #4CAF50;
    color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="contactController">
  <table style="width:100%">
    <tr>
      <th>CATEGORIAS</th>
    </tr>
    <tr>
      <th>id_categoria</th>
      <th>id_empresa</th> 
    </tr>
    <tr ng-repeat="categoria in categorias">
      <td>{{categoria.id_categoria}}</td>
      <td>{{categoria.id_empresa}}</td> 
    </tr>
  </table>
  <br/>
  <table style="width:100%">
    <tr>
      <th>CATEGORIAS_AUX</th>
    </tr>
    <tr>
      <th>id_categoria</th>
      <th>id_empresa</th> 
      <th>accion</th>
    </tr>
    <tr ng-repeat="categoria_aux in categorias_aux">
      <td>{{categoria_aux.id_categoria}}</td>
      <td>{{categoria_aux.id_empresa}}</td> 
      <td><button ng-click="delete(categoria_aux)">remove</button></td>
    </tr>
  </table> 
</div>

    • 0