angularjs - obtener - ng-value

¿Cómo puedo denotar qué campos de entrada han cambiado en AngularJS?

Question

Estoy trabajando en un formulario de edición (user.html) que PONE datos en una API, pero me gustaría evitar poner todos los datos en el formulario. Me gustaría PONER solo los artículos cambiados.

He visto el uso de sucio y prístino cuando se trabaja con formularios, pero esto se aplica a cualquier cambio en el formulario. También he visto el uso de ng-change, pero no deseo activar una acción en un cambio a un elemento, simplemente denote que el elemento cambiado debe incluirse en el PUT.

¿Alguien encontró una forma de indicar solo los campos de entrada que han cambiado?

Answer 1

A menudo encuentro que querrá más funcionalidad cuando permita a los usuarios actualizar configuraciones / información. Tales como la capacidad de restablecer la información o cancelar la edición y volver atrás. Sé que eso no fue parte de la solicitud, pero cuando lo consideras, hace otras cosas más fáciles.

Usted almacena los valores guardados y también tiene los valores editados, puede restablecer los valores guardados, ya que no cambian. Luego puede comparar los 2 para determinar qué cambió.

Ejemplo de trabajo : http://jsfiddle.net/TheSharpieOne/nJqTX/2/

Mire el registro de la consola para ver qué cambió cuando envía el formulario en el ejemplo. Es un objeto que puede enviar fácilmente a través de PUT.

function myCtrl($scope) {
    $scope.user = {
        firstName: "John",
        lastName: "Smith",
        email: "[email protected]"
    };
    $scope.reset = function () {
        angular.copy($scope.user, $scope.edit);
    };
    $scope.submitForm = function(){
        console.log(findDiff($scope.user, $scope.edit));
        // do w/e to save, then update the user to match the edit
        angular.copy($scope.edit, $scope.user);
    };

    function findDiff(original, edited){
        var diff = {}
        for(var key in original){
            if(original[key] !== edited[key])
                diff[key] = edited[key];
        }
        return diff;
    }
}

Nota: findDiff es simple, supone que los dos objetos tienen las mismas claves y solo los valores han cambiado. Copiamos los objetos para que no se conviertan en 2 referencias al mismo objeto, pero de hecho 2 objetos.

Answer 2

Agregando más a la respuesta de TheSharpieOne . La diferencia entre original y editado también podría deberse a nuevos campos agregados en el objeto editado. Por lo tanto, verificación adicional para el mismo

function findDiff(original, edited){
    var diff = {}
    for(var key in original){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }
    for(var key in edited){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }

    return diff;
}

Answer 3

Construyendo las respuestas de ARN y TheSharpieOne. Si usa un guión bajo en su proyecto, puede tomar este enfoque para encontrar diferencias en las matrices de objetos.

function findDiff(original, edited){
    _.filter(original, function(obj){ return !_.findWhere(edited, obj); });
}

Answer 4

Puede usar $scope.$watch(''scopeVariable'', function(oldValue, newValue)...) y compilar un objeto que contenga únicamente newValue s que sean diferentes de oldValue s.

Aquí hay un link a documentos angulares con respecto a $ watch.

Answer 5

Una forma simple de recuperar un objeto solo con valores modificados en el evento submit:

var dirtyInput = $(''#myForm .ng-dirty'');
var change = {};

for (var i = 0; i < dirtyInput.length; i++) {
  change[dirtyInput[i].name] = dirtyInput[i].value;
}

Answer 6

viejo hilo, pero para construir sobre la respuesta de TheSharpieOne, es posible que desee comprobar la igualdad utilizando angular.equals en lugar de "===" de lo contrario, esto no funcionará para las matrices.

function findDiff(original, edited){
  var diff = {}
    for(var key in original){
      if(!angular.equals(original[key], edited[key]))
        diff[key] = edited[key];
    }
    return diff;
}

Answer 7

Si coloca la entrada en un form con un atributo de name y luego le da a la entrada un atributo de name , también puede acceder a la propiedad $pristine la entrada.

<div ng-controller="MyController">
  <form name="myForm">
    <input type="text" name="first" ng-model="firstName">
    <input type="text" name="last" ng-model="lastName">
  </form>
</div>

app.controller(''MyController'', function($scope) {
  // Here you have access to the inputs'' `$pristine` property
  console.log($scope.myForm.first.$pristine);
  console.log($scope.myForm.last.$pristine);
});

Puede usar $scope.myForm.$pristine para ver si los campos han cambiado, y la propiedad $pristine en cada propiedad de entrada en el formulario para ver si esa entrada ha cambiado. Incluso puede iterar sobre el objeto myForm (los objetos que no son campos de entrada tienen claves con el prefijo $ ):

angular.forEach($scope.myForm, function(value, key) {
  if(key[0] == ''$'') return;
  console.log(key, value.$pristine)
});
// first, true
// last, false