Angular에서 변경된 입력 필드를 표시하는 방법JS

Angular에서 변경된 입력 필드를 표시하는 방법JS

API에 데이터를 PUT하는 편집 폼(user.html)을 만들고 있습니다만, 폼의 모든 데이터를 PUT하는 것은 피하고 싶습니다.변경된 아이템만 넣어주세요.

폼으로 작업할 때 더럽고 깨끗한 것을 사용하는 것을 본 적이 있지만, 이는 폼의 모든 변경에 적용됩니다.ng-change의 사용도 보았습니다만, 1개의 요소에 대한 변경으로 액션을 트리거 하는 것은 아닙니다.변경된 요소를 PUT에 포함해야 한다는 것을 나타내고 있을 뿐입니다.

변경된 입력 필드만 표시할 수 있는 방법을 찾은 사람?

에 입력을 입력했을 경우form와 함께nameAtribute를 지정한 후 입력에 Atribute를 부여합니다.nameAtribute, 입력에 액세스도 액세스 할 수 있습니다.$pristine소유물.

<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);
});

사용할 수 있습니다.$scope.myForm.$pristine변경된 필드가 없는지 확인하고$pristine해당 입력이 변경되었는지 확인하기 위해 양식에 있는 각 입력의 속성에서 속성을 선택합니다.반복할 수도 있습니다.myFormobject(비입력필드 오브젝트에는 키 프리픽스가 부가되어 있습니다).$):

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

사용자가 설정/정보를 갱신할 수 있도록 할 때 더 많은 기능을 필요로 하는 경우가 많습니다.예를 들어, 정보를 리셋하거나 편집을 취소하고 되돌리는 기능 등이 있습니다.요청 사항이 아닌 건 알지만, 이 점을 고려하시면 다른 일이 쉬워집니다.

저장된 값을 저장하고 편집된 값을 가지고 있으면 값이 변경되지 않으므로 저장된 값으로 재설정할 수 있습니다.그런 다음 두 가지를 비교하여 무엇이 변경되었는지 확인할 수 있습니다.

작업 예: http://jsfiddle.net/TheSharpieOne/nJqTX/2/

콘솔 로그를 참조하여 예제의 폼을 전송했을 때 변경된 내용을 확인합니다.PUT으로 쉽게 보낼 수 있는 물건입니다.

function myCtrl($scope) {
    $scope.user = {
        firstName: "John",
        lastName: "Smith",
        email: "john.smith@example.com"
    };
    $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;
    }
}

주의: findDiff는 단순합니다.두 개체의 키가 같고 값만 변경되었다고 가정합니다.동일한 오브젝트에 대한 2개의 참조가 아니라 실제로는 2개의 오브젝트가 되도록 오브젝트를 복사합니다.

이전 스레드이지만 TheSharpieOne의 답변을 기반으로 구축하려면 "===" 대신 angular.timeout을 사용하여 동일성을 확인하는 것이 좋습니다. 그렇지 않으면 어레이에서 작동하지 않습니다.

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

사용할 수 있습니다.$scope.$watch('scopeVariable', function(oldValue, newValue)...)다음 중 하나만을 포함하는 개체를 만듭니다.newValue와는 다른oldValues.

여기 $watch에 관한 Angular docs 링크입니다.

ARN과 The SharpieOne의 답변을 바탕으로 구축.프로젝트에서 밑줄을 사용하는 경우 이 방법을 사용하여 개체 배열의 차이를 찾을 수 있습니다.

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

송신 이벤트에서 변경된 값으로만 객체를 취득하는 간단한 방법:

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

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

The Sharpie One의 답변에 추가.원본과 편집된 항목이 다른 이유는 편집된 개체에 추가된 새 필드 때문일 수도 있습니다.따라서 동일한 항목에 대한 추가 검사

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;
}

언급URL : https://stackoverflow.com/questions/18641618/how-can-i-denote-which-input-fields-have-changed-in-angularjs