آموزش انگولار-رویدادها
انگولار دارای دستوراتی درونی برای رویداد های HTML است.
دستور ng-click
دستور ng-click یک رویداد کلیک شدن را در انگولار، تعریف می کند.
مثالی از انگولار
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
محو کردن عناصر HTML
از دستور ng-hide برای مشخص کردن نمایش(visibility) یک قسمت از اپلیکیشن استفاده می شود.
مقدار "ng-hide="true باعث می شود که یک عنصر HTML ناپدید بشود.
مقدار "ng-hide="false باعث می شود که یک عنصر HTML قبل مشاهده باشد.
مثالی از انگولار
<button ng-click="toggle()">Toggle</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>
توضیح اپلیکیشن:
اولین قسمت personController دقیقا مانند آنچه که در قسمت کنترلرها آموختید می باشد.
اپلیکیشن مورد نظر دارای یک مقدار پیش فرض(یک متغیر) است: 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 استفاده شده است:
مثالی از انگولار
<button ng-click="toggle()">Toggle</button>
<p ng-show="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 = true;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
});
</script>
- نوشته شده توسط احسان عباسی
- بازدید: 7612
