آموزش انگولار-رویدادها

انگولار دارای دستوراتی درونی برای رویداد های HTML است.

دستور ng-click

دستور ng-click یک رویداد کلیک شدن را در انگولار، تعریف می کند.

مثالی از انگولار

<div ng-app="" ng-controller="myCtrl">

<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 قبل مشاهده باشد.

مثالی از انگولار

<div ng-app="myApp" ng-controller="personCtrl">

<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 استفاده شده است:

مثالی از انگولار

<div ng-app="myApp" ng-controller="personCtrl">

<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>

خودتان امتحان کنید »

: نوشته شده توسط احسان عباسی; بازدید: 7406