উত্তর:
এনজি-বাইন্ডের একমুখী ডেটা বাইন্ডিং রয়েছে ($ স্কোপ -> ভিউ)। এটির একটি শর্টকাট রয়েছে {{ val }}
যা $scope.valএইচটিএমএলতে প্রবেশ করানো স্কোপ মানটি প্রদর্শন করে যেখানে valএকটি পরিবর্তনশীল নাম name
NG মডেল ফর্ম উপাদানের ভিতরে রাখা করার উদ্দেশ্যে ও বাঁধাই দ্বিমুখী ডেটা রয়েছে ($ সুযোগ -> দৃশ্য এবং দেখতে পারেন -> $ সুযোগ) যেমন <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'যা সেই নির্দেশকে এনজিএমডেলের অ্যাক্সেস পেতে দেয় 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 এ কার্যকর করে।
Plunker উদাহরণ
অবশ্যই 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>এনজি মডেল এর জন্য দায়ী:
এই নির্দেশটি অগ্রাধিকার স্তর 0 এ কার্যকর করে।
Plunker উদাহরণ
অবশ্যই 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>এনজিবাইন্ড এর জন্য দায়ী:
আপনি যদি ব্যবহার ng-bindবা এর মধ্যে দ্বিধা বোধ করেন তবে ng-modelএই প্রশ্নের উত্তর দেওয়ার চেষ্টা করুন:
আপনার কি কেবল ডেটা প্রদর্শন করা দরকার ?
হ্যাঁ: ng-bind (একমুখী বাঁধাই)
না: ng-model (দ্বিমুখী বাইন্ডিং)
আপনার কি পাঠ্য সামগ্রী আবদ্ধ করতে হবে (এবং মান নয়)?
হ্যাঁ: ng-bind
না: ng-model (যেখানে মান প্রয়োজন সেখানে আপনার এনজি-বাইন্ড ব্যবহার করা উচিত নয়)
আপনার ট্যাগ কি এইচটিএমএল
<input>?
হ্যাঁ: ng-model (আপনি <input>ট্যাগ সহ এনজি-বাইন্ড ব্যবহার করতে পারবেন না )
নং: ng-bind
NG মডেল
এনগুলারজেএস-এ এনজি-মডেল নির্দেশনা ইনপুট উপাদানগুলির সাথে প্রয়োগে ব্যবহৃত ভেরিয়েবলগুলিকে আবদ্ধ করার সবচেয়ে বড় শক্তি। এটি দ্বিমুখী ডেটা বাঁধাই হিসাবে কাজ করে। আপনি যদি দ্বিমুখী বাইন্ডিংগুলি সম্পর্কে আরও ভালভাবে বুঝতে চান তবে আপনার কাছে একটি ইনপুট উপাদান রয়েছে এবং সেই ক্ষেত্রটিতে আপডেট হওয়া মানটি অবশ্যই অ্যাপ্লিকেশনটির অন্যান্য অংশে প্রতিবিম্বিত হতে হবে। আরও ভাল সমাধানটি সেই ক্ষেত্রের সাথে একটি ভেরিয়েবলকে আবদ্ধ করা এবং আউটপুট যে পরিবর্তনশীল আপনি যেখানেই আবেদনটির মাধ্যমে আপডেট মানটি প্রদর্শন করতে চান output
NG-বেঁধে
এনজি-বাইন্ড এনজি-মডেলের চেয়ে অনেক বেশি আলাদাভাবে কাজ করে। এনজি-বাইন্ড হ'ল এইচটিএমএল উপাদানটির অভ্যন্তরের 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>এনজিএমডেল সাধারণত একটি ভেরিয়েবলকে বাইন্ডের জন্য ইনপুট ট্যাগের জন্য ব্যবহার করে যা আমরা নিয়ামক এবং এইচটিএমএল পৃষ্ঠা থেকে ভেরিয়েবল পরিবর্তন করতে পারি তবে এইচটিএমএল পৃষ্ঠায় একটি ভেরিয়েবল প্রদর্শনের জন্য এনজি বাইন্ড ব্যবহার করতে পারি এবং আমরা নিয়ামক থেকে কেবল পরিবর্তনশীল এবং এইচটিএমএল কেবল ভেরিয়েবল প্রদর্শন করতে পারি।
আমরা <p>প্রদর্শনের জন্য ng-bind {{model}}এনজি-বাইন্ড ব্যবহার করতে পারি, এর জন্য আমরা শর্টকাট ব্যবহার করতে পারি, আমরা এইচটিএমএল ইনপুট নিয়ন্ত্রণের সাথে এনজি-বাইন্ড ব্যবহার করতে পারি না, তবে আমরা ng-bind {{model}}এইচটিএমএল ইনপুট নিয়ন্ত্রণের জন্য শর্টকাট ব্যবহার করতে পারি ।
<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
Hello {{name}}
<p ng-bind="name"</p>