অ্যাঙ্গুলার জেএস (AngularJS) ইভেন্টস
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার)
AngularJS এর নিজস্ব এইচটিএমএল ইভেন্টস্ নির্দেশনা (directives) আছে.
ng-click ডিরেক্টিভ
ng-click ডিরেক্টিভ একটি AngularJS ক্লিক ইভেন্টকে সংজ্ঞায়িত করে.
AngularJS উদাহরণ:
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
HTML এর এলিমেন্ট হাইড (অদৃশ্য) করা
ng-hide ডিরেক্টিভ ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-hide="true" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-hide="false" ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।
AngularJS উদাহরণ:
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">Toggle</button>
myVar">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
উপরোক্ত এপ্লিকেশন ব্যাখ্যা:
PersonController এর ব্যবহার কন্ট্রোলার সম্পর্কে অধ্যায়ে আলোচনার অনুরুপ।
অ্যাপ্লিকেশনে একটি ডিফল্ট প্রোপার্টি (একটি ভেরিয়েবল) আছে: $scope.myVar = false;
ng-hide ডিরেক্টিভ <p> এলিমেন্ট সহ দুইটি ইনপুট ফিল্ড এর দৃশ্যমানতা নির্ধারণ করে, myVar এর (true or false) মান অনুযায়ী।
toggle() ফাংশন, myVar এর টগল করে true এবং false এর মধ্যে।
ng-hide="true" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
HTML এলিমেন্টসমূহ দেখানো
ng-show ডিরেক্টিভ ও ব্যবহার করা যেতে পারে এপ্লিকেশন এর কোন একটি অংশের দৃশ্যমানতা নির্ধারণের জন্য।
ng-show ="false" ভ্যালু একটি HTML এলিমেন্টকে অদৃশ্য করে।
ng-show ="true" ভ্যালু একটি HTML এলিমেন্টকে দৃশ্যমান করে।
এখানে উপরের মতো একই উদাহরণ ng-hide এর পরিবর্তে ng-show ব্যবহার করে দেখানো হলো:
AngularJS উদাহরণ:
<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">Toggle</button>
<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName">
Last Name: <input type="text" ng-model="lastName">
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
function personController($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
