এঙ্গুলার জেস জাভাস্ক্রিপ্ট জেকুয়েরি এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
 

AngularJS ng-model ডিরেক্টিভ(directive)



ng-model ডিরেক্টিভ(directive) এইচটিএমএল কন্ট্রোল(control) যেমন-input, select এবং textarea ইত্যাদি এর ভ্যালু(value) এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করে।


ng-model ডিরেক্টিভ(directive)

ng-modelডিরেক্টিভ(directive) AngularJS এ সৃষ্ট ভ্যারিয়েবল এবং ইনপুট ফিল্ডের ভ্যালু(value) এর মধ্যে বন্ধন সৃষ্টি করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 
  <div ng-app="myApp" ng-controller="myCtrl"> 
      নামঃ <input ng-model="name">
 </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "Tamim Iqbal";
         });
    </script>
            
</body>
</html>

ফলাফল




দুইভাবে বন্ধন(Two-Way Binding)

AngularJS এ বন্ধন দুইভাবে হতে পারে। যদি ইনপুট ফিল্ডের ভ্যালু(value) পরিবর্তন হয়, তাহলে AngularJS এর প্রোপার্টি/ভ্যারিয়েবলের ভ্যালুও(value) পরিবর্তন হয়।

অর্থাৎ মডেল(Model) পরিবর্তন হলে ভিউ(View) পরিবর্তন হয় এবং ভিউ(View) পরিবর্তন হলে মডেলও(Model) পরিবর্তন হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<p> AngularJS এর প্রয়োগ দেখার জন্য নিচের বক্সে কিছু লিখুনঃ </p>

<div ng-app="myApp" ng-controller="myCtrl">
নামঃ <input ng-model="name">
<h3>আপনি লিখেছেনঃ {{name}}</h3>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Tamim Iqbal";
});
</script>
</body>
</html>

ফলাফল




ইউজার ইনপুট ভ্যালিডেশন(Validate User Input)

ng-model ডিরেক্টিভ(directive) এপ্লিকেশন ডাটা যেমন-number, e-mail এবং required ইত্যাদির জন্য টাইপ ভ্যালিডেশনও সরবরাহ করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 
   <form ng-app="" name="myForm">
      ই-মেইলঃ
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">বৈধ ই-মেইল এড্রেস না।</span>
   </form>
            
</body>
</html>

ফলাফল



উপরের উদাহরণে যদি ng-show এট্রিবিউট true রিটার্ন করে, তাহলে < span > এলিমেন্ট এর কন্টেন্ট প্রদর্শিত হবে।

ng-model এট্রিবিউটে কোনো প্রোপার্টি বিদ্যমান না থাকলে AngularJS নিজে থেকেই একটি তৈরি করে নিবে।


এপ্লিকেশন স্ট্যাটাস(Application Status)

ng-model ডিরেক্টিভ(directive) এপ্লিকেশন ডাটার জন্য বিভিন্ন স্ট্যাটাস যেমন-invalid, dirty, touched, error ইত্যাদি সরবরাহ করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<form ng-app="" name="myForm" ng-init="myText = 'sattacademy@gmail.com'">

     ই-মেইলঃ
    <input type="email" name="myAddress" ng-model="myText" required>
    <p>স্ট্যাটাস পরিবর্তন করার জন্য ই-মেইল Edit করুন।</p>
    <h1>স্ট্যাটাস</h1>
    <p>Valid: {{myForm.myAddress.$valid}} (ভ্যালু সঠিক হলে true রিটার্ন করবে)</p>
    <p>Dirty: {{myForm.myAddress.$dirty}} (ভ্যালু পরিবর্তন হলে true রিটার্ন করবে)</p>
    <p>Touched: {{myForm.myAddress.$touched}} (ইনপুট ফিল্ড ফোকাস হলে true রিটার্ন করবে)</p>
</form>
            
</body>
</html>

ফলাফল




সিএসএস ক্লাস(CSS Class)

এইচটিএমএল এলিমেন্টের স্ট্যাটাস এর উপর ভিত্তি করে ng-model ডিরেক্টিভ(directive) সিএসএস ক্লাস সরবরাহ করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
<style>
    input.ng-invalid {
        background-color: grey;
                 }
 </style>
</head>
<body>

  <form ng-app="" name="myForm">
     নাম লিখুনঃ
         <input name="myName" ng-model="myText" required>
  </form>
            
</body>
</html>

ফলাফল




তথ্যঃ "required" এট্রিবিউটসহ একটি টেক্সত ফিল্ড খালি থাকলে তা বৈধ নয়।

ফর্ম ফিল্ডের স্ট্যাটাসের উপর ভিত্তি করে ng-model ডিরেক্টিভ(directive) নিম্নোক্ত সিএসএস ক্লাসসমূহ সংযোজন/বিয়োজন করেঃ

  1. ng-empty
  2. ng-not-empty
  3. ng-touched
  4. ng-untouched
  5. ng-valid
  6. ng-invalid
  7. ng-dirty
  8. ng-pending
  9. ng-pristine