رخدادها در AngularJS

رخدادها در AngularJS

دستور ng-click

دستور ng-click یک رخداد تعریف می کند که به محض کلیک بر روی دکمه توسط کاربر، اجرا می شود.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click Me!</button> <p> {{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller ('myCtrl', function ($scope) { $scope.count = 0; }); </script> </body> </html>

پنهان سازی المان های HTML

از دستور ng-hide برای تنظیم قابلیت رویت و نمایش ( visibility ) یک قسمت از برنامه استفاده می شود.

مقدار " ng-hide="true باعث می شود که یک عنصر HTML محو شود.

مقدار " ng-hide="false باعث می شود یک المان HTML قابل رویت گردد.

</p><!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">Hide user</button> <p ng-hide="myVar"> First Name: <input type=text ng-model="firstName"> <br> Last Name: <input type=text ng-model="lastName"> <br><br> Full Name: {{firstName + " " + lastName}} </p> </div> <script> var app = angular.module('myApp', []); app.controller ('personCtrl', function ($scope) { $scope.firstName = "John", $scope.lastName = "Doe" $scope.myVar = false; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); </script> </body> </html>

شرح برنامه:

اولین قسمت personController دقیقا مانند آنچه در مبحث کنترلگرها یاد گرفتید است.

برنامه ی مورد نظر دارای یک خاصیت ( property ) پیش فرض (یک متغیر) است: scope.myVar=false $

دستور ng-hide نمایش یافتن یا محو شدن تگ p به همراه دو فیلد input را بر اساس مقدار متغیر myVar که می تواند true یا false باشد، تعیین می کند

تابع ()toggle باعث می شود متغیر myVar بین true و false تغییر وضعیت دهد.

دستور " ng-hide="true باعث می شود که عنصر مورد نظر، پنهان شود.

نمایش دادن عناصر HTML

همچنین از دستور ng-show می توان برای تنظیم نمایش و قابلیت رویت ( visibility ) یک قسمت از برنامه بهره گرفت.

دستور " ng-show="false المان HTML را محو می کند.

دستور " ng-show="true یک المان HTML را نمایان می کند.

در زیر نمونه ای مانند مثال بالا را می بینید با این فرق که بجای ng-hide از ng-show استفاده شده:

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <button ng-click="toggle()">Hide user</button> <p ng-show="myVar"> First Name: <input type=text ng-model="person.firstName"> <br> Last Name: <input type=text ng-model="person.lastName"><br><br> Full Name: {{person.firstName + " " + person.lastName}} </p> </div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function ($scope) { $scope.person = { firstName: "John", lastName: "Doe" }; $scope.myVar = true; $scope.toggle = function () { $scope.myVar = !$scope.myVar; }; }); </script> </body> </html>



نظرات کاربران



عبارت امنیتی : حاصل 7 × 1 می شود :
متن پیام :