مدل شی گرای سند یا HTML DOM در AngularJS

مدل شی گرای سند یا HTML DOM در AngularJS

AngularJS دارای دستورهایی برای پیوند دادن ( bind کردن) داده های برنامه های Angular به خصیصه ها یا attribute های عناصر HTML DOM است

دستور ng-disabled

دستور ng-disabled داده های برنامه Angular را به خصیصه ی disabled عناصر HTML ، پیوند می دهد.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">Click Me!</button> </p> <p> <input type="checkbox" ng-model="mySwitch" />Button </p> <p> {{ mySwitch }} </p> </div> </body> </html>

شرح برنامه ی بالا:

دستور ng-disabled داده ی mySwitch برنامه را به خصیصه ی disabled دکمه ی HTML متصل ( bind ) می کند.

دستور ng-model مقدار المان اچ تی ام checkbox را به مقدار mySwitch متصل می کند.

در صورتی که مقدار mySwitch برابر با true شود، دکمه ی مورد نظر غیرفعال می شود:

<p> <button disabled>Click Me!</button> </p>

چنانچه مقدار mySwitch برابر با false باشد، دکمه ی مورد نظر، غیرفعال نمی شود:

<p> <button>Click Me!</button> </p>

دستور ng-show

دستور ng-show یک عنصر HTML را نمایان می کند یا پنهان می سازد.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app=""> <p ng-show="true">I am visible.</p> <p ng-show="false">I am not visible.</p> </div> </body> </html>

دستور ng-show با توجه به مقدار ng-show یک عنصر HTML را محو کرده یا نمایش می دهد شما می توانید از هر عبارتی که true یا false را برمی گرداند، استفاده نمایید.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app="" ng-init="hour=13"> <p ng-show="hour > 12">I am visible.</p> </div> </body> </html>

دستور ng-hide

دستور ng-hide یک المان HTML را پنهان کرده و یا نمایان می سازد.

<!DOCTYPE html> <html> <head> <title></title> <script src="Angular.js"></script> </head> <body> <div ng-app=""> <p ng-hide="true">I am not visible.</p> <p ng-hide="false">I am visible.</p> </div> </body> </html>



نظرات کاربران



عبارت امنیتی : حاصل 7 × 7 می شود :
متن پیام :