मैं यह कैसे निरूपित कर सकता हूं कि कौन से इनपुट फ़ील्ड AngularJS में बदल गए हैं




angularjs-ng-change (5)

मैं एक संपादन फ़ॉर्म (user.html) पर काम कर रहा हूँ, जो डेटा को एपीआई के रूप में देता है, लेकिन मैं फ़ॉर्म में मौजूद सभी डेटा को रोकने से बचना चाहता हूँ। मैं सिर्फ बदली हुई वस्तुओं को ही लेना चाहता हूं।

मैंने रूपों के साथ काम करते समय गंदे और प्राचीन का उपयोग देखा है, लेकिन यह रूप में किसी भी परिवर्तन पर लागू होता है। मैंने एनजी-परिवर्तन का उपयोग भी देखा है, लेकिन मैं एक तत्व में बदलाव पर एक कार्रवाई को ट्रिगर नहीं करना चाहता, बस यह निरूपित करता हूं कि परिवर्तित तत्व को PUT में शामिल किया जाना चाहिए।

किसी को भी केवल इनपुट फ़ील्ड को बदलने का एक तरीका मिला है जो बदल गए हैं?


ARN और TheSharpieOne के उत्तरों का निर्माण। यदि आप अपनी परियोजना में अंडरस्कोर का उपयोग कर रहे हैं, तो आप वस्तुओं के सरणियों में अंतर खोजने के लिए यह तरीका अपना सकते हैं।

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

आप $scope.$watch('scopeVariable', function(oldValue, newValue)...) उपयोग कर सकते हैं $scope.$watch('scopeVariable', function(oldValue, newValue)...) और केवल newValue s युक्त ऑब्जेक्ट का निर्माण करें जो newValue s से अलग हैं।

यहाँ $ घड़ी के संबंध में कोणीय डॉक्स का link गया है।


मैं अक्सर पाता हूं कि आप उपयोगकर्ताओं को सेटिंग्स / जानकारी को अपडेट करने की अनुमति देते समय अधिक कार्यक्षमता चाहते हैं। जैसे कि सूचना को रीसेट करने या संपादन को रद्द करने और वापस लौटने की क्षमता। मुझे पता है कि यह अनुरोध का हिस्सा नहीं था, लेकिन जब आप इस पर विचार करते हैं तो इससे अन्य चीजें आसान हो जाती हैं।

आप सहेजे गए मूल्यों को संग्रहीत करते हैं और संपादित मूल्य भी रखते हैं, आप सहेजे गए मानों को वापस बदल सकते हैं क्योंकि वे नहीं बदलते हैं। फिर आप यह निर्धारित करने के लिए 2 की तुलना कर सकते हैं कि क्या बदल गया है।

काम करने का उदाहरण : http://jsfiddle.net/TheSharpieOne/nJqTX/2/

कंसोल लॉग को देखें कि उदाहरण में फ़ॉर्म सबमिट करते समय क्या बदला। यह एक ऐसी वस्तु है जिसे आप आसानी से 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;
    }
}

नोट: findDiff सरल है, यह मान लेता है कि दो वस्तुओं की कुंजी समान है और केवल मान बदल गए हैं। हम वस्तुओं को कॉपी करते हैं ताकि वे एक ही वस्तु के 2 संदर्भ न बनें, लेकिन वास्तव में 2 ऑब्जेक्ट।


सबमिट ईवेंट पर केवल बदले हुए मानों के साथ किसी ऑब्जेक्ट को प्राप्त करने का एक सरल तरीका:

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

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

यदि आप इनपुट को एक name विशेषता के साथ एक रूप में रखते हैं और फिर इनपुट को एक name विशेषता देते हैं, तो आप इनपुट की $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 का उपयोग करने के लिए $scope.myForm.$pristine उपयोग कर सकते हैं। तुम भी myForm वस्तु पर पुनरावृति कर सकते हैं (गैर-इनपुट-फ़ील्ड ऑब्जेक्ट में $ साथ उपसर्ग की कुंजी होती है):

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




angularjs-ng-change