ably ably برای هدایت شدن به سایت جدید اینجا کلیک کنید

آموزش برنامه نویسی

آموزش برنامه نویسی وب، اندروید، ویندوز , اسکیوال و...
Tell: 0912 097 5516
| Email: Hello@EduOnline.ir

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

مقدار 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

نظرات (۰)

هيچ نظري هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
up
ما را در گوگل محبوب کنید