এঞ্জুলারজএস এন-মডেল ইনস্ট্রাকশান

ng-model ইনট্রাকশান কন্ট্রোলস (input, select, textarea) এর মানকে অ্যাপ্লিকেশন ডাটার সাথে বান্ধন করে।

ng-model ইনট্রাকশান

ব্যবহার করুন ng-model ইনট্রাকশান ফিল্ডের মানকে অ্যাঙ্গুলারজেসে তৈরি করা প্রতিমানে বান্ধন করতে আপনি ইনট্রাকশান ইনট্রাকশান প্রদান করতে পারেন:

ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

দ্বিমুখী বান্ধন

বান্ধন দ্বিমুখী। যদি ব্যবহারকারী ইনপুট ফিল্ডের মান পরিবর্তন করে, AngularJS প্রতিমানগুলোও তার মান পরিবর্তন করবে:

ইনস্ট্যান্স

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
  <h1>You entered: {{name}}</h1>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ব্যবহারকারীর ইনপুট পরীক্ষা

ng-model ইনট্রাকশান, নম্বর, ইমেইল, বাধ্যতামূলক) প্রদান করে এক্সটার্ন্যাল টিস্টিং:

ইনস্ট্যান্স

<form ng-app="" name="myForm">
  ইমেইল:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উপরের উদাহরণে, শুধুমাত্র যখন ng-show প্রতিমানগুলোতে এক্সপ্রেশন ফলাফল এবং true তবে span দেখা যাবে।

যদি ng-model প্রতিমানগুলোতে প্রতিমান অস্তিত্ববিহীন, AngularJS তাকে তৈরি করবেন:

অ্যাপ্লিকেশন অবস্থা

ng-model ইনট্রাকশান প্রদান করে অ্যাপ্লিকেশনের ডাটার অবস্থা (বৈধ, গণ্য, টাচ, ত্রুটি):

ইনস্ট্যান্স

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  ইমেইল:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

সিএসএস শ্রেণী

ng-model ইনট্রাকশান এলিমেন্টের অবস্থা অনুযায়ী সিএসএস শ্রেণী প্রদান করে:

ইনস্ট্যান্স

<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
  আপনার নাম দিন:
  <input name="myName" ng-model="myText" required>
</form>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ng-model ইনস্ট্রাকশন ফর্ম ফিল্ডের অবস্থা অনুযায়ী নিচের শ্রেণী যোগ করা বা তুলে দেওয়া হয়:

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine