بخش های اصلی

آموزش AngularJS

آموزش AngularJS – اتصال به HTML DOM

دستورات زیر برای اتصال داده های برنامه به خصیصه های (attributes) عناصرِ HTML DOM به کار میرن.

شماره

نام

توضیحات

2

ng-disabled

کنترل داده شده را غیرفعال می کنه

2

ng-show

کنترل داده شده را نشان میده

3

ng-hide

کنترل داده شده را پنهان می کنه

4

ng-click

یک رویداد کلیکِ AngularJS را ارائه میده.

دستورِ ng-disabled

خصیصه ی (attribute) ng-disabled را به یک دکمه ی HTML اضافه کنین و به model پاس بدین. model را به یک checkbox اتصال بدین و تغییر را ببینین.

<input type = "checkbox" ng-model = "enableDisableButton">غیرفعال کردن دکمه
<button ng-disabled = "enableDisableButton">کلیک کنید!</button>

دستورِ ng-show

خصیصه ی (attribute) ng- show را به یک دکمه ی HTML اضافه کنین و به model پاس بدین. model را به یک checkbox اتصال بدین و تغییر را ببینین.

<input type = "checkbox" ng-model = "showHide1">نمایش دکمه
<button ng-show = "showHide1">کلیک کنید!</button>

دستورِ ng-hide

خصیصه ی (attribute) ng-hide را به یک دکمه ی HTML اضافه کنین و به model پاس بدین. model را به یک checkbox اتصال بدین و تغییر را ببینین.

<input type = "checkbox" ng-model = "showHide2">مخفی کردن دکمه
<button ng-hide = "showHide2">کلیک کنید!</button>

دستورِ ng-click

خصیصه ی (attribute) ng- click را به یک دکمه ی HTML اضافه کنین model  را به روز رسانی کنین. model را به html اتصال بدین و تغییر را ببینین.

<p>مجموع کلیک: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">کلیک کنید!</button>

مثال

مثال زیر تمام دستورات بالا را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>AngularJS HTML DOM</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "">
         
         <table border = "0">
            <tr>
               <td><input type = "checkbox" ng-model = "enableDisableButton">مخفی کردن دکمه</td>
               <td><button ng-disabled = "enableDisableButton">کلیک کنید!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">نمایش دکمه</td>
               <td><button ng-show = "showHide1">کلیک کنید!</button></td>
            </tr>
            
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">مخفی کردن دکمه</td>
               <td><button ng-hide = "showHide2">کلیک کنید!</button></td>
            </tr>
            
            <tr>
               <td><p>مجموع کلیک: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">کلیک کنید!</button></td>
            </tr>
         </table>
         
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

testAngularJS.htm را در مرورگر وب اجرا کنین. نتیجه را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد