दिलचस्प पोस्ट
क्या एसक्यूएललेमी के पास डीजांगो के गेट_ओआरएक्रेट के बराबर है? चर के साथ jQuery के चयनकर्ता एकीकरण और इकाई परीक्षणों के बीच अंतर क्या है? सेलेनियम, अजगर के साथ फ़ाइल कैसे अपलोड करें (चित्र) अपरिभाषित व्यवहार और बीमार बनने के बीच का अंतर, कोई नैदानिक ​​संदेश आवश्यक नहीं है सी में माप के इकाइयों – लगभग सिंगलटन में डबल चेक लॉकिंग एस्पनेट एमवीसी 4 में कुकी का उपयोग करना एसिंक / आसन बनाम थ्रेड्स jQuery के JSON प्रतिक्रिया हमेशा एक ParseError को चालू करती है मैं C ++ में डबल इनपुट के रूप में उपयोगकर्ता इनपुट कैसे मान्य हूं? सी ++ में एक्सएमएल पार्सर का क्या उपयोग करना चाहिए? पोस्टग्रेस्क्ल GROUP_CONCAT समकक्ष? विभिन्न उत्पाद स्वादों के लिए विभिन्न निर्भरता को परिभाषित करने के तरीके सी # रेगेक्स स्प्लिट – कॉमा के बाहर उद्धरण चिह्न

एनजी-मॉडल और एनजी-बाइंड में क्या अंतर है

मैं वर्तमान में AngularJS सीख रहा हूं और ng-bind और ng-model बीच अंतर को समझने में कठिनाई हो रही हूं।

क्या कोई मुझे बता सकता है कि वे किस प्रकार भिन्न हैं और जब किसी को दूसरे पर इस्तेमाल किया जाना चाहिए?

Solutions Collecting From Web of "एनजी-मॉडल और एनजी-बाइंड में क्या अंतर है"

एनजी-बाइंड में एक-तरफा डेटा बाइंडिंग ($ दायरा -> दृश्य) है। इसमें एक शॉर्टकट {{ val }} जो कि स्कोप वैल्यू प्रदर्शित करता है $scope.val को html में डाला जाता है जहां val एक चर नाम है।

एनजी-मॉडल फार्म तत्वों के अंदर रखा जा सकता है और दो-तरफ़ा डेटा बाध्यकारी है ($ का दायरा -> देखें और देखें -> $ क्षेत्र) जैसे <input ng-model="val"/>

टोश का जवाब अच्छी तरह से सवाल दिल के दिल में हो जाता है यहाँ कुछ अतिरिक्त जानकारी है ….

फ़िल्टर और फ़ॉर्मेटर्स

ng-bind और ng-model दोनों ही उपयोगकर्ता के लिए आउटपुट करने से पहले डेटा को बदलने की अवधारणा है। उस अंत तक, ng-bind फिल्टर का उपयोग करता है, जबकि ng-model फ़ॉर्मेटर्स का उपयोग करता है।

फ़िल्टर (एनजी-बाइंड)

ng-bind , आप अपने डेटा को बदलने के लिए एक फिल्टर का उपयोग कर सकते हैं। उदाहरण के लिए,

<div ng-bind="mystring | uppercase"></div> ,

या अधिक आसानी से:

<div>{{mystring | uppercase}}</div>

ध्यान दें कि uppercase एक अंतर्निहित कोणीय फ़िल्टर है , हालांकि आप अपना स्वयं का फ़िल्टर भी बना सकते हैं

फॉर्मेटर (एनजी-मॉडल)

एनजी-मॉडल require: 'ngModel' बनाने के लिए, आप एक निर्देश बनाते हैं जिसके लिए require: 'ngModel' , जो कि निर्देश को एनजीएमडेल के controller तक पहुंच प्राप्त करने की अनुमति देता है। उदाहरण के लिए:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$formatters.push(function(value) { return value.toUpperCase(); }); } } } 

फिर अपने आंशिक में:

 <input ngModel="mystring" my-model-formatter /> 

यह अनिवार्य रूप से ng-model समतुल्य है, जो ऊपर के ng-bind उदाहरण में uppercase फ़िल्टर कर रहा है।


पारसर्स

अब, क्या होगा यदि आप उपयोगकर्ता को mystring के मूल्य को बदलने की इजाजत देना चाहते हैं? ng-bind सिर्फ एक तरीका है, मॉडल से -> देखें हालांकि, ng-model दृश्य -> मॉडल से बाइंड कर सकता है जिसका मतलब है कि आप उपयोगकर्ता को मॉडल के डेटा को बदलने की अनुमति दे सकते हैं और पार्सर का उपयोग करके आप उपयोगकर्ता के डेटा को सुव्यवस्थित तरीके से प्रारूपित कर सकते हैं। यह है जो ऐसा दिखता है:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$parsers.push(function(value) { return value.toLowerCase(); }); } } } 

ng-model फॉर्मेटर / पार्सर उदाहरणों के लाइव प्लंकर के साथ खेलते हैं


और क्या?

ng-model भी अंतर्निहित मान्यता है। NgModel के controller.$setValidity(validationErrorKey, isValid) को कॉल करने के लिए बस अपने $parsers या $formatters फ़ंक्शन को संशोधित करें controller.$setValidity(validationErrorKey, isValid) फ़ंक्शन

कोनेयर 1.3 में एक नया $ वैदिकर सरणी है, जिसका उपयोग आप $parsers या $formatters बजाय सत्यापन के लिए कर सकते हैं।

कोनेर 1.3 में एनजीएमडेल के लिए गेस्टेटर / सेटर का समर्थन भी है

ngModel

NgModel निर्देश एक निवेश, चयन, पाठ (या कस्टम प्रपत्र नियंत्रण) दायरे पर एक संपत्ति के लिए बांधता है।

यह निर्देश प्राथमिकता स्तर 1 पर कार्यान्वित करता है

उदाहरण प्लंकर

JAVASCRIPT

 angular.module('inputExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.val = '1'; }]); 

सीएसएस

 .my-input { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; background: transparent; } .my-input.ng-invalid { color:white; background: red; } 

एचटीएमएल

 <p id="inputDescription"> Update input to see transitions when valid/invalid. Integer is a valid value. </p> <form name="testForm" ng-controller="ExampleController"> <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" aria-describedby="inputDescription" /> </form> 

ngModel के लिए जिम्मेदार है:

  • दृश्य को मॉडल में बाध्य करना, जो अन्य निर्देशों जैसे इनपुट, टेक्सटेरा या चयन की आवश्यकता होती है।
  • सत्यापन व्यवहार प्रदान करना (अर्थात आवश्यक, संख्या, ईमेल, यूआरएल)।
  • नियंत्रण की स्थिति को ध्यान में रखते हुए (वैध / अमान्य, गंदे / प्राचीन, छुआ / अछूता, सत्यापन त्रुटियां)
  • एनीमेशन सहित तत्व (एनजी-वैध, एनजी-अमान्य, एनजी-गंदा, एनजी-प्रिस्टिन, एनजी-छुआ, एनजी-अछूचित) पर संबंधित सीएसएस कक्षाएं निर्धारित करना।
  • अपने माता पिता के रूप में नियंत्रण पंजीकृत करना

ngBind

NgBind विशेषता निर्दिष्ट अभिव्यक्ति के मान के साथ निर्दिष्ट HTML तत्व की पाठ सामग्री को बदलने के लिए, और उस अभिव्यक्ति के मूल्य को बदलते समय पाठ सामग्री को अपडेट करने के लिए कोण से कहता है।

यह निर्देश प्राथमिकता स्तर 0 पर कार्यान्वित करता है।

उदाहरण प्लंकर

JAVASCRIPT

 angular.module('bindExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.name = 'Whirled'; }]); 

एचटीएमएल

 <div ng-controller="ExampleController"> <label>Enter name: <input type="text" ng-model="name"></label><br> Hello <span ng-bind="name"></span>! </div> 

एनजीबीआईंड इसके लिए उत्तरदायी है:

  • किसी निर्दिष्ट अभिव्यक्ति के मूल्य के साथ निर्दिष्ट HTML तत्व की पाठ सामग्री को बदलना

यदि आप ng-bind या ng-model उपयोग के बीच झिझक रहे हैं, तो इन सवालों के जवाब देने की कोशिश करें:


क्या आपको केवल डेटा प्रदर्शित करने की आवश्यकता है?

  • हां: ng-bind (एक तरफ़ा बाध्यकारी)

  • नहीं: ng-model (दो-तरफा बंधन)

क्या आपको पाठ सामग्री (और मान नहीं) बाइंड करने की आवश्यकता है?

  • हां: ng-bind

  • नहीं: ng-model (आपको एनजी-बाइंड का उपयोग नहीं करना चाहिए जहां मूल्य आवश्यक है)

क्या आपका टैग एक HTML <input> ?

  • हां: ng-model (आप इनपुट टैग के साथ एनजी-बाइंड का उपयोग नहीं कर सकते हैं)

  • नहीं: ng-bind

एनजी मॉडल

AngularJS में एनजी-मॉडल डायरेक्टिव इनपुट घटकों के साथ आवेदन में उपयोग किए जाने वाले चर को बाध्य करने की सबसे बड़ी ताकत है। यह दो तरह से डेटा बाइंडिंग के रूप में काम करता है यदि आप दो तरह से बाइंडिंग के बारे में बेहतर समझना चाहते हैं, तो आपके पास एक इनपुट घटक है और उस फ़ील्ड में नवीनीकृत मान एप्लिकेशन के दूसरे भाग में दिखाई देना चाहिए। बेहतर समाधान है कि वेरिएबल को उस फ़ील्ड और आउटपुट को बाइंड करने के लिए, जो कि वे वैरिएबल है, जहां से आप अपडेट किए गए मान को एप्लिकेशन से चालू कर सकते हैं।

एनजी-बाँध

एनजी-बाइंड एनजी-मॉडल से बहुत अलग काम करता है। एनजी-बाँध एक तरह से डेटा बाध्यकारी है जिसका इस्तेमाल आंतरिक एचटीएमएल के रूप में मूल्य को प्रदर्शित करने के लिए किया जाता है। इस निर्देश को वेरिएबल के साथ बाध्य करने के लिए उपयोग नहीं किया जा सकता है, लेकिन केवल HTML तत्व सामग्री के साथ। असल में इसका उपयोग एनजी-मॉडल के साथ किया जा सकता है ताकि घटक को HTML तत्वों में बांधा जा सके। इन निर्देशों को डिवेल, स्पॅन, आदि जैसे ब्लॉकों को आंतरिक एचटीएमएल सामग्री के साथ अद्यतन करने के लिए बहुत उपयोगी है।

यह उदाहरण आपको समझने में मदद करेगा।

 angular.module('testApp',[]).controller('testCTRL',function($scope) { $scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both."; $scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding."; }); 
 div input{ width:600px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <head>Diff b/w model and bind</head> <body data-ng-app="testApp"> <div data-ng-controller="testCTRL"> Model-Data : <input type="text" data-ng-model="testingModel"> <p>{{testingModel}}</p> <input type="text" data-ng-bind="testingBind"> <p ng-bind="testingBind"></p> </div> </body> 

ngModel आमतौर पर इनपुट टैग के लिए एक वेरिएबल बाँध के लिए उपयोग करते हैं, जो कि हम नियंत्रक और html पृष्ठ से चर को बदल सकते हैं, लेकिन ngBind का प्रयोग html पेज में एक वैरिएबल को प्रदर्शित करने के लिए करते हैं और हम सिर्फ नियंत्रक से चर परिवर्तन कर सकते हैं और सिर्फ चर दिखा सकते हैं।

हम <p> प्रदर्शित करने के लिए ng-bind {{model}} उपयोग कर सकते हैं, हम ng-bind {{model}} लिए शॉर्टकट का उपयोग कर सकते हैं, हम एचपीएल इनपुट कंट्रोल के साथ एनजी-बाइंड का उपयोग नहीं कर सकते, लेकिन हम ng-bind {{model}} लिए शॉर्टकट का उपयोग कर सकते हैं ng-bind {{model}} साथ html इनपुट नियंत्रण

 <input type="text" ng-model="name" placeholder="Enter Something"/> <input type="text" value="{{name}}" placeholder="Enter Something"/> Hello {{name}} <p ng-bind="name"</p>