AngularJS में टू-वे फ़िल्टरिंग कैसे करें?

Question

दिलचस्प चीजों में से एक एंगुलरजेएस कर सकता है एक विशेष डेटाबाइंडिंग अभिव्यक्ति के लिए एक फ़िल्टर लागू करें, जो लागू करने के लिए एक सुविधाजनक तरीका है, उदाहरण के लिए, एक मॉडल के गुणों की संस्कृति-विशिष्ट मुद्रा या दिनांक स्वरूपण। गुंजाइश पर संपत्तियों की गणना करना भी अच्छा है। समस्या यह है कि इन सुविधाओं में से कोई भी दो-तरफ़ा डेटाबाइंडिंग परिदृश्यों के साथ काम नहीं करता है - केवल एक-तरफ़ा डेटाबाइंडिंग इस दायरे से दृश्य तक। यह एक अन्यथा उत्कृष्ट पुस्तकालय में एक शानदार चूक लगता है - या मैं कुछ याद कर रहा हूँ?

में KnockoutJS , मैं एक पढ़ें / लिखें परिकलित प्रॉपर्टी बना सकते हैं, जो मुझे कार्यों की एक जोड़ी, एक जो संपत्ति के मूल्य प्राप्त करने के लिए कहा जाता है, और एक जो जब संपत्ति के लिए निर्धारित है कहा जाता है निर्दिष्ट करने के लिए अनुमति दी। इसने मुझे लागू करने की अनुमति दी, उदाहरण के लिए, संस्कृति-जागरूक इनपुट - उपयोगकर्ता को "$ 1.24" टाइप करने और पार्सिंग को व्यूमॉडल में फ्लोट करने की अनुमति देता है, और इनपुट में प्रतिबिंबित व्यूमॉडल में परिवर्तन होता है।

निकटतम चीज़ जो मुझे इसके समान मिल सकती है, यह है इसका उपयोग $scope.$watch(propertyName, functionOrNGExpression);मुझे एक फ़ंक्शन को लागू करने की अनुमति देता है जब $scopeपरिवर्तनों में एक संपत्ति । लेकिन यह हल नहीं करता है, उदाहरण के लिए, संस्कृति-जागरूक इनपुट समस्या। समस्याओं को नोटिस करें जब मैं अपने तरीके से $watchedसंपत्ति को संशोधित करने का प्रयास करता हूं $watch:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

( http://jsfiddle.net/gyZH8/2/ )

जब उपयोगकर्ता टाइप करना शुरू करता है तो इनपुट तत्व बहुत भ्रमित हो जाता है। मैंने संपत्ति को दो गुणों में विभाजित करके सुधार किया, एक बिना मूल्य के और एक पार्स मूल्य के लिए।

$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.hiddenProperty = Globalize.parseFloat(newValue);
});

( http://jsfiddle.net/XkPNv/1/ )

यह पहले संस्करण पर एक सुधार था, लेकिन थोड़ा और अधिक क्रिया है, और ध्यान दें कि अभी भी parsedValueगुंजाइश परिवर्तनों की संपत्ति का एक मुद्दा है (दूसरे इनपुट में कुछ टाइप करें, जो parsedValueसीधे परिवर्तन करता है। शीर्ष इनपुट को नोटिस नहीं करता है। अपडेट करें)। यह एक नियंत्रक कार्रवाई से या डेटा सेवा से डेटा लोड करने से हो सकता है।

क्या एंगुलरजेएस का उपयोग करके इस परिदृश्य को लागू करने का कोई आसान तरीका है? क्या मुझे प्रलेखन में कुछ कार्यक्षमता याद आ रही है?

Answer 1

यह पता चला है कि इसका एक बहुत ही सुंदर समाधान है, लेकिन यह अच्छी तरह से प्रलेखित नहीं है।

प्रदर्शन के लिए प्रारूपण मॉडल |संचालक और एक कोणीय द्वारा संभाला जा सकता है formatter। यह पता चला है कि ngModel जिसमें केवल फॉर्मेटर्स की सूची नहीं है, बल्कि पार्सर्स की सूची भी है।

1. ng-modelटू-वे डेटा बाइंडिंग बनाने के लिए उपयोग करें

<input type="text" ng-model="foo.bar"></input>

2. अपने कोणीय मॉड्यूल में एक निर्देश बनाएं जो एक ही तत्व पर लागू होगा और यह ngModelनियंत्रक पर निर्भर करता है

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            ...
        }
    };
});

3. linkविधि के भीतर , ngModelनियंत्रक में अपने कस्टम कन्वर्टर्स जोड़ें

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

4. अपने नए निर्देश को उसी तत्व में जोड़ें जिसमें पहले से ही है ngModel

<input type="text" lowercase ng-model="foo.bar"></input>

यहां एक कामकाजी उदाहरण है जो पाठ को inputमॉडल में नीचे और ऊपर से नीचे की ओर बदलता है

मॉडल नियंत्रक के लिए API दस्तावेज़ भी एक संक्षिप्त विवरण और अन्य उपलब्ध तरीकों का अवलोकन किया है।

Comments

आपके लिंकिंग फंक्शन में चौथे पैरामेट के नाम के रूप में "ngModel" का उपयोग करने का कोई कारण है? क्या यह निर्देश के लिए एक सामान्य नियंत्रक नहीं है जो मूल रूप से ngModel विशेषता के साथ कुछ नहीं करना है? (फिर भी यहां कोणीय सीखना, इसलिए मैं पूरी तरह से गलत हो सकता हूं।)

— ड्रू मिलर

यानी, foo.bar के नियंत्रक हैं, जिनमें से एक उदाहरण है -, जोड़ने समारोह के 4 पैरामीटर हो जाएगा ngModel निर्देश के नियंत्रक: क्योंकि " 'ngModel' की आवश्यकता होती है" की ngModelController । आप जो चाहें 4 वाँ पैरामीटर नाम दे सकते हैं। (मैं इसे नाम ngModelCtrl

— दूंगा

यह तकनीक कस्टम सत्यापन अनुभाग में docs.angularjs.org/guide/forms पर प्रलेखित है ।

— निखिल डबास

लोड डेटा - सभी लोअरकेस पर क्लिक करते समय प्रदान की गई फिडल में @ मर्क राजकॉक, मुझे उम्मीद थी कि मॉडल मूल्य ALL CAPS में होगा, लेकिन मॉडल मूल्य बहुत कम था। क्या आप pls। समझाएं कि क्यों, और कैसे मॉडल को हमेशा CAPS में बनाया जाता है

— राजकमल सुब्रमण्यन

@rajkamal, चूंकि loadData2 () $scopeसीधे संशोधित करता है, यही वह मॉडल है जो तब तक सेट हो जाएगा ... जब तक उपयोगकर्ता टेक्स्टबॉक्स के साथ इंटरैक्ट नहीं करता। उस समय, कोई भी पार्सर तब मॉडल मूल्य को प्रभावित कर सकता है। एक पार्सर के अलावा, आप मॉडल मूल्य को बदलने के लिए अपने नियंत्रक में $ घड़ी जोड़ सकते हैं।

— मार्क राजकोक