मैं कैसे इंगित कर सकता हूं कि AngularJS

Question

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

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

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

Answer 1

आप एक name विशेषता के साथ एक form में इनपुट रखा और फिर इनपुट एक 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 उपयोग कर सकते हैं, और यदि कि इनपुट बदल गया है फार्म पर प्रत्येक इनपुट की संपत्ति पर $pristine संपत्ति को देखने के लिए।

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

Answer 2

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

यहां $$ घड़ी के बारे में कोणीय दस्तावेज़ों में है।

Answer 3

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

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

कार्य उदाहरण: कंसोल लॉग क्या बदल गया जब आप उदाहरण में प्रपत्र सबमिट देखने के लिए पर 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 ऑब्जेक्ट्स।

Answer 4

पुराना धागा लेकिन TheSharpieOne के उत्तर पर निर्माण करने के लिए, आप "===" के बजाय angular.equals का उपयोग करके समानता की जांच करना चाहेंगे अन्यथा यह सरणी के लिए काम नहीं करेगा।

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 5

एआरएन और TheSharpieOne के जवाबों का निर्माण। यदि आप अपने प्रोजेक्ट में अंडरस्कोर का उपयोग कर रहे हैं तो आप ऑब्जेक्ट्स के सरणी में अंतर खोजने के लिए यह दृष्टिकोण ले सकते हैं।

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

Answer 6

एक आसान तरीका केवल घटना प्रस्तुत पर बदली हुई मूल्यों के साथ एक वस्तु पुनः प्राप्त करने के:

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

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

Answer 7

TheSharpieOne's answer के लिए और अधिक जोड़ने। मूल और संपादित के बीच का अंतर संपादित ऑब्जेक्ट में जोड़े गए नए फ़ील्ड के कारण भी हो सकता है। इसलिए उसी

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