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

AngularJS এইচটিএমএল ডোম



এইচটিএমএল ডোম এলিমেন্টের এট্রিবিউট এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করার জন্য 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> 

ফলাফল