सवाल Angularjs का उपयोग कर सहेजे गए डेटा का पता लगाएं


मैं AngularJs के लिए एक नौसिखिया हूँ, तो यह मामूली हो सकता है। क्या कोई अंतर्निर्मित AngularJs हैं directive किसी रूप में सहेजे गए डेटा का पता लगाने के लिए। यदि नहीं तो एक लिखने के बारे में कैसे जाना है। कोई भी संकेतक प्रशंसनीय होंगे।

एचटीएमएल कोड है

<input type="text" runat="server" />

और मेरा कोणीय जेएस नियंत्रक कोड है

    function MyCtrl1($scope) {
      // code to do stuff
}MyCtrl1.$inject = ['$scope'];

मैं सहेजे गए डेटा का पता लगाने के लिए एक निर्देश लिखने की कोशिश कर रहा हूं, और मैं अनुमान लगा रहा हूं कि इसे उपरोक्त नियंत्रक में लिखा जाना चाहिए। गलत होने पर मुझे सही करें।


44
2018-02-13 09:05


मूल




जवाब:


AngularJS सीएसएस वर्ग सेट करता है ng-pristine तथा ng-dirty किसी भी इनपुट फ़ील्ड पर आपने एनजी-मॉडल का उपयोग किया है, और आपके फॉर्मकंट्रोलर में गुण हैं $pristine तथा $dirty जिसे आप यह देखने के लिए जांच सकते हैं कि फॉर्म गंदा है या नहीं। तो हाँ, यह संभव है।

क्या आप कुछ कोड प्रदान कर सकते हैं जो दिखाता है कि आप क्या करने की कोशिश कर रहे हैं? इससे आपकी मदद करना आसान हो जाएगा।

संपादित करें

यहां एक प्राचीन उदाहरण है कि कैसे एक प्राचीन / गंदे राज्य का पता लगाने के लिए, और एक प्राचीन राज्य में कैसे वापस जाना है:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
    <script type="text/javascript">
    function Ctrl($scope) {
        var initial = {text: 'initial value'};
        $scope.myModel = angular.copy(initial);
        $scope.revert = function() {
            $scope.myModel = angular.copy(initial);
            $scope.myForm.$setPristine();
        }
    }
    </script>
</head>
<body>
    <form name="myForm" ng-controller="Ctrl">
        myModel.text: <input name="input" ng-model="myModel.text">
        <p>myModel.text = {{myModel.text}}</p>
        <p>$pristine = {{myForm.$pristine}}</p>
        <p>$dirty = {{myForm.$dirty}}</p>
        <button ng-click="revert()">Set pristine</button>
    </form>
</body>
</html>

76
2018-02-13 09:33



डेटा ठीक काम करता है। मुझे यह एक और सवाल पता है, लेकिन क्या वह ब्राउज़र को बंद करने या किसी अन्य पेज पर नेविगेट करने का प्रयास करते समय सहेजे गए परिवर्तनों के उपयोगकर्ता को सूचित करना संभव है - iJade
निश्चित रूप से, यह बिल्कुल संभव है। आप इसे फॉर्म पर निर्देश के साथ करेंगे, लेकिन जैसा कि आपने कहा था, यह एक और सवाल में होना चाहिए। - Anders Ekdahl
एक और सवाल के रूप में पोस्ट किया। देखो। stackoverflow.com/questions/14852802/... - iJade
ऐसा लगता है कि अंगुलर के नवीनतम संस्करण में $ setPristine को हटा दिया गया है। - sthomps
$ गंदे / $ pristine कम से कम 1.0.7 में उम्मीद के रूप में काम नहीं लग रहा है। अगर मेरे पास एक साधारण रूप है और एक मूल्य बदलता है, तो $ गंदे सत्य पर सेट है। हालांकि, अगर मैं मूल्य को प्रारंभिक मान में बदलता हूं, तो $ गंदे सच रहता है। नॉकआउट से आ रहा है, यह निर्दिष्ट करने का एक तरीका है कि यह बताएं कि आपका मॉडल गंदा है या नहीं (डिफ़ॉल्ट यह है कि यह पूरे मॉडल को JSON में परिवर्तित करता है और एक स्ट्रिंग तुलना करता है)। क्या यह कोणीय में संभव है? - Corey Cole


निगरानी pristine/dirty राज्य शुरू करने के लिए एक अच्छी जगह है, लेकिन यदि आप उपयोगकर्ता को सर्वोत्तम संभव उपयोगिता प्रदान करना चाहते हैं, तो आपको किसी भी परिवर्तन का पता लगाने के लिए प्रारंभिक फॉर्म डेटा के साथ वर्तमान फॉर्म डेटा की तुलना करना होगा। यदि फॉर्म गंदे है तो इसका मतलब यह नहीं है कि उसने डेटा बदल दिया है।

मैंने इस सटीक समस्या को हल करने के लिए एक बहुत छोटा और उपयोगी मॉड्यूल बनाया है। इसके साथ आप अपने कंट्रोलर कोड को यथासंभव सरल रख सकते हैं। यह कहते हैं modified प्रत्येक मॉडल के लिए संपत्ति और यहां तक ​​कि स्वचालित रूप से फॉर्म नियंत्रक भी बनाते हैं और आप केवल एक फॉर्म को कॉल करके पूरे फॉर्म को रीसेट कर सकते हैं reset() विधि, ताकि आप मैन्युअल रूप से परिवर्तनों का पता लगाने के बजाय अपने एप्लिकेशन के व्यावसायिक तर्क पर ध्यान केंद्रित कर सकें।

कृप्या डेमो देखें

आप यहां एक वितरण पैकेज के साथ-साथ एक स्रोत कोड भी पा सकते हैं: https://github.com/betsol/angular-input-modified (यह भी उपलब्ध है कुंज)

अगर आपको इस पुस्तकालय का उपयोग करने में कोई मदद की आवश्यकता होगी - तो आप मुझसे व्यक्तिगत रूप से संपर्क कर सकते हैं। मुझे मदद करने में खुशी होगी। चीयर्स!


35
2017-10-13 11:15



मैंने यह कोशिश की है। लेकिन मेरे लिए हाँ या नहीं संशोधित है, बिल्कुल नहीं बदलता है। मैं मॉड्यूल लोड करने के लिए ओक्लाज़लोड का उपयोग कर रहा हूं। मैं बहुत निराश हूं लेकिन अद्भुत प्लगइन। क्या आपके पास लागू करने के लिए चरण-दर-चरण प्रक्रिया है ? - Jeeva Jsb
मेरे लिए हमेशा झूठी संशोधित :-( - Jeeva Jsb
यह वास्तव में दिलचस्प है: "अगर फॉर्म गंदा है तो इसका मतलब यह नहीं है कि उसने डेटा बदल दिया है।" जानना अच्छा लगेगा इसका मतलब क्या है :) - sakovias
@ सकोवियास आप इनपुट क्षेत्र में "एबीसी" दर्ज कर सकते हैं और फिर सामग्री मिटा सकते हैं। कोणीय इस इनपुट को गंदे के रूप में मानेंगे, लेकिन अंतर्निहित डेटा अभी भी वही है, यानी खाली स्ट्रिंग। तो यह गंदा है, लेकिन संशोधित नहीं है। - Slava Fomin II
अगर कोई और विशेषता थी तो इससे अधिक समझदारी होगी, changed, जो डिफ़ॉल्ट रूप से ऐसा करता है। अफसोस की बात है, यहां तक ​​कि कोणीय 2 या 4.0 भी ऐसी कार्यक्षमता शामिल नहीं है। - Blauhirn


मैंने अपने नियंत्रक में यही किया है।

जब मुझे संशोधन के लिए फॉर्म डेटा मिलता है, तो पहले मैं इसके स्ट्रिंग प्रस्तुति को इस तरह के स्कोप वैरिएबल में सहेजता हूं:

$scope.originalData = JSON.stringify($scope.data);

फिर मैं एक राज्य परिवर्तन श्रोता बनाते हैं:

 var $locationChangeStartUnbind = $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    if ($scope.originalData !== JSON.stringify($scope.data)) {
        //Show alert and prevent state change
    } else {
        //DO NOTHING THERE IS NO CHANGES IN THE FORM
    }
});

तब मैं श्रोताओं को खोपड़ी पर नष्ट कर देता हूं:

$scope.$on('$destroy', function () {
    window.onbeforeunload = null;
    $locationChangeStartUnbind();
});

उम्मीद है की यह मदद करेगा।


14
2018-04-20 16:58



यह बहुत अच्छा है, धन्यवाद! ps: कभी-कभी कोणीय जोड़ सकता है $$HashKey मॉडल के गुण; का उपयोग करते हुए angular.toJson($scope.data) 'JSON.stringify ($ scope.data)' के बजाय इसका अर्थ यह होगा कि कोणीय राज्यों को ट्रैक करने के लिए उपयोग किए जा रहे किसी भी ट्रैकिंग चर को हटाने का ख्याल रखेगा। - iamserious
यह वही है जो मैं खोज रहा था - धन्यवाद! @Iamserious की टिप्पणी के बाद, मैंने इसे उपयोग करने के लिए और अधिक विश्वसनीय पाया angular.toJson($scope.data) - XstiX
श्रोताओं को contollers में उपयोग न करें। किसी भी सर्वोत्तम अभ्यास की जांच करें - Jens Alenius


इस निर्देश का प्रयास करें जो यूई-राउटर के साथ काम करता है

https://github.com/facultymatt/angular-unsavedChanges


1
2018-04-15 19:03



मैंने आपके सुझाव की कोशिश की है। लेकिन मुझे एक समस्या मिली। एक बार फॉर्म बदल जाने के बाद प्रिंसिन अपडेट नहीं किया जाता है। तो यदि उपयोगकर्ता कुछ ग्रंथों में प्रवेश करता है तो किसी भी तरह इसे साफ़ करें, पृष्ठ अभी भी सहेजे गए डेटा का पता लगाता है। - asubanovsky