بسم الله الرحمن الرحیم

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش دهم

AngularJS Events

AngularJS  دارای رهنمود رویدادهای HTML خاص خودش است.

رهنمود ng-click

رهنمود ng-click یک رویداد کلیک AngularJS برای ما تعریف می کند.

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

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>

مخفی سازی عناصر HTML

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

مقدار ng-hide="true" یک عنصر HTML را invisible می کند و طبیعتا با مقدار ng-hide="false" عنصر HTML ما visible می شود.

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

<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>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script> 

توضیح برنامه

بخش اول personController دقیقا مشابه توضیحات بخش controllers است که قبلا آن را بررسی کردیم. برنامه ما یک پراپرتی پیش فرض دارد (یک متغیر)

$scope.myVar = false;

رهنمود ng-hide قابلیت نمایش و یا عدم نمایش تگ <p> را با input های مشخص شده میان آن تنظیم می کند و این تغییر حالت با تنظیم مقدار (true or false) متغییر myVar انجام می شود.

تابع ()toggle مقدار متغییر myVar را به true و false تغییر می دهد. مقدار "ng-hide="true عنصر مورد نظر را غیرقابل نمایش می کند.

نمایش عناصر HTML

رهنمود ng-show همچنین می تواند قابلیت نمایش یک بخش از برنامه را نیز مشخص کند. اگر مقدار "ng-show="false باشد عنصر ما نمایش داده نخواهد شد و بالعکس اگر ng-show="true" باشد عنصر ما نمایش داده خواهد شد.
در اینجا همان مثال بالا را تکرار کرده ایم و فقط به جای ng-hide از ng-show استفاده کرده ایم.

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

<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>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script> 

مشاهده تمامی آموزش های دوره AngularJS