3

Tengo dos arrays los cuales contienen ciertos valores el primer array esta predefinido y el segundo array es igual al primer array. El segundo array en si es un array auxiliar el cual lo utilizo para eliminar elementos. El error que tengo es que cuando elimino elementos del segundo array también se borran los elementos del primer array, Este es mi código:

Al momento de verificar mi array esta vació. ¿Cómo puedo resolver este error? y aquí mi 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>

2 respuestas 2

3

El problema que tienes, es que al hacer $scope.categorias_Aux = $scope.categorias; también se esta copiando la referencia en memoria de $scope.categorias a $scope.categorias_Aux de tal manera que lo que le hagas a uno, afectara a los dos.

Para clonar el array, deberías inicializar la el array $scope.categorias_Aux = [] y después iterar sobre el array original e ir insertando o los datos.

O de manera mas optima, $scope.categorias_Aux = $scope.categorias.slice(0); también te copiara los datos, sin copiarte la referencia.

Diferencia entre Shallow copy(copia superficial) y Deep copy(Copia profunda)

1
  • 1
    Si está usando Angular también se puede usar angular.copy($scope.categorias); el 3 ago. 2017 a las 7:19
0

Te he cambiado algo el código para que sea mas visual. Le he estado dando mil vueltas, y lo único que he encontrado es que en lugar de igualarlos con = tienes que usar .copy(). Ya que con el primero es como si se relacionases y con el segundo son dos elementos separados. Fuente

PD: para mas información sobre copy, he lanzado una pregunta

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>

1
  • 1
    gracias @GDP excelente respuesta
    – Dimoreno
    el 3 ago. 2017 a las 16:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.