a

ABLY مقالات و مطالب مجموعه

دوره آموزشی AngularJS به زبان فارسی - بخش دهم

دوره آموزشی AngularJS به زبان فارسی - بخش دهم

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

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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 یک بخش از برنامه مورد استفاده قرار گیرد.

 

 

 

 

 

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

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number