javascript - ejemplos - angularjs tutorial

Restablecer un modelo con angular.js

Question

Simplemente intento restablecer valores como este:

$scope.initial = [
    {
        data1: 10,
        data2: 20
    }            
];


$scope.datas= $scope.initial;


$scope.reset = function(){
  $scope.datas = $scope.initial;  
}

Pero no produce nada, ¿alguna idea para arreglarlo?

angular.module(''app'', []).controller(''MyCtrl'', function($scope) {
  $scope.initial = [
    {
      data1: 10,
      data2: 20
    }            
  ];

  $scope.datas= $scope.initial;

  $scope.reset = function(){
    $scope.datas = $scope.initial;  
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div>
  <a ng-click="reset()">Reset to initial value</a>
  or     
  <button ng-click="name = initial">Reset to initial value</button>
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>
</div>

Hay un ejemplo de trabajo en jsfiddle

Answer 1

@ Mark Rajcok: No me malinterpreten, pero creo que

angular.copy($scope.initial, $scope.datas);

no es una sintaxis alternativa para

$scope.datas = angular.copy($scope.initial);

La forma en que lo entiendo:

$scope.datas = angular.copy($scope.initial);

Crea una copia de $ scope.initial y asigna la referencia a $ scope.datas.

angular.copy($scope.initial, $scope.datas);

Actualiza los valores de $ scope.datas con $ scope.initial values

Consulte los documentos de angularjs ( angular.copy ), y allí la secuencia en la declaración de Devolución

Devuelve La copia o el destino actualizado, si se especificó el destino.

Answer 2

Considera los siguientes botones

• Editar
• Salvar
• Cancelar

Cuando el usuario hace clic en editar y cambia datos y luego usa el botón cancelar para obtener los datos anteriores, aquí se explica cómo puede implementar esto.

HTML

<div>
    <button data-ng-click="edit()" data-ng-show="!editing">Edit</button>
    <button data-ng-click="save()" data-ng-show="editing">Save</button>
    <button data-ng-click="cancel()" data-ng-show="editing">Cancel</button>
</div>

AngularJs

$scope.edit = function () {
    $scope.editing = true;
    $scope.copy = angular.copy($scope.data);
};

$scope.cancel = function () {
    $scope.editing = false;
    $scope.data = $scope.copy;
};

Referencias

• docs.angularjs.org/api/ng/function/angular.copy
• Publicación Orignal

Answer 3

Esta es realmente una pregunta sobre JavaScript (así que agregué la etiqueta "javascript"). Cuando se asigna un objeto JavaScript (como array $ scope.initial) a una variable, se asigna por referencia, no por copia. Entonces, esta declaración

$scope.datas= $scope.initial;

da como resultado $ scope.datas que apuntan al objeto $ scope.initial. Cualquier cambio que se realice en $ scope.datas o $ scope.initial ambos afectan el mismo objeto (único). Dado que ng-model se usa para unir datos a elementos de objetos data1 y data2, cualquier cambio en las entradas de texto cambiará los elementos data1 y data2 del objeto al que $ scope.datas hace referencia, es decir, $ scope.initial. Para ver esto en acción, agregue lo siguiente al HTML de su violín:

<p>{{initial}}</p>

Cuando cambie los valores en los cuadros de texto, verá que $ scope.initial también está cambiando.

@Max proporcionó una respuesta parcial: use angular.copy () en la función de reinicio. Sin embargo, también deberá usar angular.copy () en la asignación inicial también:

 $scope.datas = angular.copy($scope.initial);

Actualizar:

Como @EpokK muestra en su respuesta, una solución alternativa es

angular.copy($scope.initial, $scope.datas);

Como @bekite menciona en su respuesta, la solución de @EpokK no crea otro objeto.

El código completo

angular.module(''app'', []).controller(''MyCtrl'', function($scope) {
  $scope.initial = [{
    data1: 10,
    data2: 20
  }];
  $scope.datas = angular.copy($scope.initial);
  $scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
    // or
    // angular.copy($scope.initial, $scope.datas);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyCtrl">
  <div ng-repeat="data in datas">
    <input type="text" ng-model="data.data1" />
    <input type="text" ng-model="data.data2" />
  </div> 
  <a ng-click="reset()">Reset to initial value</a>
  or
  <hr />
  <p ng-repeat="data in datas">{{data.data1}}, {{data.data2}}</p>{{initial}}
</div>

fiddle

Answer 4

He usado todo lo que dije anteriormente manteniendo una copia de seguridad, pero al usarlo me enfrenté a un problema más.
Pensé que si lo publicaba aquí sería útil para otros

Tengo el código de la sección de perfil como a continuación:

var profileBackup ={};
$scope.profileContinue = function()
{
  profileBackup = angular.copy($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = profileBackup;
}

Pero me sorprendió ver que incluso la variable de perfil no variableBackup se actualizaba cuando el modelo cambia (supongo que se devuelve la referencia en este caso)

Luego cambié mi código así:

$scope.profileContinue = function()
{
  profileBackup = angular.toJson($scope.userData.profile); 
//  profileBackup = $scope.userData.profile; 
//other code
}

$scope.profileCancel = function()
{
$scope.userData.profile = angular.fromJson(profileBackup);
}

por favor, perdóneme si no tiene ningún sentido ...

Answer 5

Intente cambiar la función de reset para usar angular.copy

$scope.reset = function () {
    $scope.datas = angular.copy($scope.initial);
};

Answer 6

Me encanta el comentario de Yasser: claro y conciso.

Definitivamente prefiero copiar el valor cuando empiezo a editar, y luego simplemente reemplazar la referencia al cancelar / guardar.

Prefiero unir en una copia local, y no los datos originales, y luego cambiar los datos finales solo en guardar. Esto previene todo tipo de errores más adelante y encapsula el comportamiento de edición.

La versión final sería:

function initValue() {
    $scope.bound = angular.copy($scope.data);
}

function setValue() {
    $scope.data = $scope.bound;
}

$scope.edit = function () {
    $scope.editing = true;
    initValue();
};

$scope.cancel = function () {
    $scope.editing = false;
    initValue();
};

$scope.save= function () {
    $scope.editing = false;
    setValue();
};

Answer 7

Sintaxis de trabajo:

$scope.reset = function () {
    angular.copy($scope.initial, $scope.datas);
};

angular.copy : angular.copy(source[, destination]);