जवाबों:
एनजी-बाइंड में एक तरफ़ा डेटा बाइंडिंग ($ गुंजाइश -> दृश्य) है। इसका एक शॉर्टकट है {{ val }}
जो $scope.valhtml में डाले गए स्कोप वैल्यू को प्रदर्शित करता है जहां valएक वैरिएबल नाम है।
एनजी-मॉडल को फॉर्म तत्वों के अंदर रखने का इरादा है और इसमें दो-तरफ़ा डेटा बाइंडिंग ($ गुंजाइश -> दृश्य और दृश्य -> $ गुंजाइश) जैसे हैं <input ng-model="val"/>।
tosh का जवाब अच्छी तरह से सवाल के दिल के लिए हो जाता है। यहां कुछ अतिरिक्त जानकारी दी गई है ...।
ng-bindऔर ng-modelदोनों के पास उपयोगकर्ता के लिए आउटपुट करने से पहले डेटा को बदलने की अवधारणा है। उस छोर तक, फ़िल्टरng-bind का उपयोग करता है , जबकि फ़ॉर्मेटर्स का उपयोग करता है ।ng-model
इसके साथ ng-bind, आप अपने डेटा को बदलने के लिए एक फ़िल्टर का उपयोग कर सकते हैं । उदाहरण के लिए,
<div ng-bind="mystring | uppercase"></div>,
या अधिक बस:
<div>{{mystring | uppercase}}</div>
ध्यान दें कि uppercaseएक अंतर्निहित कोणीय फिल्टर है , हालांकि आप अपना स्वयं का फ़िल्टर भी बना सकते हैं ।
एनजी-मॉडल 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 क्या कर रहा है के बराबर है ।uppercase ng-bind
अब, क्या होगा यदि आप उपयोगकर्ता के मूल्य को बदलने की अनुमति देने की योजना बनाते हैं 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अंतर्निहित सत्यापन भी है। बस अपने संशोधित $parsersया $formattersकॉल करने के लिए समारोह ngModel के controller.$setValidity(validationErrorKey, isValid)समारोह ।
कोणीय 1.3 में एक नया $ सत्यापनकर्ता सरणी है जिसका उपयोग आप सत्यापन के लिए$parsersयाइसके बजाय कर सकते हैं$formatters।
यह निर्देश प्राथमिकता स्तर 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 इसके लिए जिम्मेदार है:
यह निर्देश प्राथमिकता स्तर 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>ngBind इसके लिए जिम्मेदार है:
यदि आप उपयोग करने में संकोच कर रहे हैं ng-bindया ng-model, इन सवालों के जवाब देने का प्रयास करें:
क्या आपको केवल डेटा प्रदर्शित करने की आवश्यकता है ?
हाँ: ng-bind (एक तरह से बाध्यकारी)
नहीं: ng-model (दो तरह से बाध्यकारी)
क्या आपको पाठ सामग्री (और मूल्य नहीं) को बांधने की आवश्यकता है ?
हाँ: ng-bind
नहीं: ng-model (आपको एनजी-बिंद का उपयोग नहीं करना चाहिए जहां मूल्य की आवश्यकता है)
क्या आपका टैग HTML है
<input>?
हां: ng-model (आप <input>टैग के साथ एनजी-बिंद का उपयोग नहीं कर सकते )
नहीं: ng-bind
एनजी मॉडल
AngularJS में एनजी-मॉडल निर्देश इनपुट घटकों के साथ आवेदन में उपयोग किए जाने वाले चर को बांधने के लिए सबसे बड़ी ताकत में से एक है। यह दो तरह से डेटा बाइंडिंग का काम करता है। यदि आप दो तरह से बाइंडिंग के बारे में बेहतर समझना चाहते हैं, तो आपके पास एक इनपुट कंपोनेंट है और उस फील्ड में अपडेट की गई वैल्यू एप्लीकेशन के दूसरे हिस्से में दिखाई देनी चाहिए। बेहतर उपाय यह है कि किसी चर को उस क्षेत्र में बाँध दिया जाए और उस चर को आउटपुट कर दिया जाए जहाँ आप अनुप्रयोग के माध्यम से अद्यतन मूल्य प्रदर्शित करना चाहते हैं।
एनजी-बाँध
एनजी-बाइंड एनजी-मॉडल की तुलना में बहुत अलग काम करता है। एनजी-बाइंड एक तरह से डेटा बाइंडिंग है जिसका उपयोग HTML घटक के अंदर मूल्य को आंतरिक HTML के रूप में प्रदर्शित करने के लिए किया जाता है। इस निर्देश का उपयोग चर के साथ बंधन के लिए नहीं किया जा सकता है, लेकिन केवल HTML तत्व सामग्री के साथ किया जा सकता है। इस का उपयोग एचटीएमएल तत्वों को घटक को बांधने के लिए एनजी-मॉडल के साथ किया जा सकता है। यह निर्देश आंतरिक HTML सामग्री के साथ ब्लॉक जैसे div, अवधि, आदि को अद्यतन करने के लिए बहुत उपयोगी है।
यह उदाहरण आपको समझने में मदद करेगा।
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>हम <p>डिस्प्ले के साथ एनजी-बाइंड का उपयोग कर सकते हैं , हम शॉर्टकट का उपयोग कर सकते हैं 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>