اقتراح الدورة

AngularJS HTML DOM

AngularJS توفر تعليمات لربط بيانات التطبيق إلى خصائص عناصر DOM HTML.

شرح التطبيق: تعليمات ng-disabled

مثال AngularJS

تعليمات bind بيانات تطبيق AngularJS إلى سمة disabled في عنصر HTML.
<p>
<div ng-app="" ng-init="mySwitch=true">
</p>
<p>
<button ng-disabled="mySwitch">انقر فوقي!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
</div>

جرب بنفسك

{{ mySwitch }}

شرح التطبيق: ng-disabled mySwitch تعليمات bind بيانات التطبيق bind إلى سمة.

ng-model تعليمات bind قيمة عنصر HTML المربعية إلى mySwitch على قيمة.

إذا mySwitch قيمة true، فإن المفتاح سيكون معطلاً:

<p>
<button disabled>انقر فوقي!</button>
</p>

إذا mySwitch قيمة false، فإن المفتاح لن يكون معطلاً:

<p>
<button>انقر فوقي!</button>
</p>

تعليمات ng-show

ng-show تعليمات عرض أو إخفاء عنصر HTML.

مثال AngularJS

<div ng-app="">  
<p ng-show="true">أنا مرئي.</p>  
<p ng-show="false">أنا غير مرئي.</p>  
</div>

جرب بنفسك

ng-show تعليمات بناءً على ng-showالقيمةعرض (أو إخفاء) عناصر HTML.

يمكنك استخدام أي تعبير تم تقييمه على أنه صحيح أو خطأ:

مثال AngularJS

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>

جرب بنفسك

في الفصل التالي، سيتم تقديم المزيد من الأمثلة على كيفية استخدام ضغط زر للإخفاء أو العرض العناصر HTML.

تعليمات ng-hide

ng-hide تعليمات إخفاء أو عرض عناصر HTML.

مثال AngularJS

<div ng-app="">  
<p ng-hide="true">أنا غير مرئي.</p>  
<p ng-hide="false">أنا مرئي.</p>  
</div>

جرب بنفسك