অ্যাঙ্গুলার জেএস এইচটিএমএল ডোম - AngularJS HTML DOM
এইচটিএমএল ডোম এলিমেন্টের এট্রিবিউট এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করার জন্য AngularJS এ কিছু নিজস্ব ডিরেক্টিভ ব্যবহার করা হয়।
ng-disabled ডিরেক্টিভ
ng-disabled ডিরেক্টিভ এইচটিএমএল ডোম এলিমেন্টের disabled এট্রিবিউট এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<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="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">এখানে ক্লিক করুন</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>বাটন
</p>
<p>
{{ mySwitch }}
</p>
</div>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যাঃ
ng-disabled ডিরেক্টিভ এইচটিএমএল বাটনের disabled এট্রিবিউট এবং এপ্লিকেশন ডাটা mySwitch এর মধ্যে বন্ধন তৈরি করে।
ng-model ডিরেক্টিভ এইচটিএমএল checkbox এলিমেন্টের ভ্যালু এবং mySwitch এর ভ্যালুর মধ্যে বন্ধন তৈরি করে।
mySwitch এর ভ্যালু যদি true হয় তাহলে বাটন disabled হয়ে যাবেঃ
<p>
<button disabled>এখানে ক্লিক করুন</button>
</p>
mySwitch এর ভ্যালু যদি false হয় তাহলে বাটন enabled হয়ে যাবেঃ
<p>
<button>এখানে ক্লিক করুন</button>
</p>
ng-show ডিরেক্টিভ
ng-show ডিরেক্টিভ এইচটিএমএল এলিমেন্টকে দেখায় অথবা লুকায়
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<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="">
<p ng-show="true">এটি দৃশ্যমান</p>
<p ng-show="false">এটি অদৃশ্য</p>
</div>
</body>
</html>
ফলাফল
ng-show এর ভ্যালুর উপর ভিত্তিকরে এইচটিএমএল এলিমেন্টকে লুকায় অথবা দেখায়।
আপনি এমন যেকোনো এক্সপ্রেশন ব্যবহার করতে পারেন যা সম্পাদন হয়ে true অথবা false হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<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="" ng-init="hour=13">
<p ng-show="hour > 12">এটি দৃশ্যমান</p>
</div>
</body>
</html>
ফলাফল
পরবর্তী অধ্যায়ে অনেক উদাহরণ দেখতে পাবেন, যেখানে বাটনে ক্লিক করে এইচটিএমএল এলিমেন্টকে লুকানো(hide) হয়েছে।
ng-hide ডিরেক্টিভ
ng-hide ডিরেক্টিভ এইচটিএমএল এলিমেন্টকে লুকায় অথবা দেখায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<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="">
<p ng-hide="true">এটি অদৃশ্য</p>
<p ng-hide="false">এটি দৃশ্যমান</p>
</div>
</body>
</html>
ফলাফল