Error in array with Angularjs

Question

Error in array with Angularjs

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I have two arrays which contain certain values the first array is predefined and the second array equals the first array . The second array itself is a array auxiliary which I use it to remove elements. The error I have is that when I delete elements of the second array the elements of the first array are also deleted, This is my code:

At the moment of verifying my array 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

asked by Dimoreno 03.08.2017 в 06:46

source

2 answers

3

The problem you have, is that by doing $scope.categorias_Aux = $scope.categorias; you are also copying the reference in memory from $scope.categorias to $scope.categorias_Aux so that what you do to one, will affect both.

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

Or more optimally, $scope.categorias_Aux = $scope.categorias.slice(0); will also copy the data, without copying the reference.

Difference between Shallow copy and Deep copy (Deep copy)

answered by 03.08.2017 в 08:54

Select fields with unique id and other conditions C: how to assign char * to const char * const *

score 0 · Accepted Answer

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

PS: for more information about copy, I've launched 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>