أحدث البرامج التعليمية وتطوير الشبكة
 

AngularJS HTML DOM

❮ السابق التالي الفصل ❯

AngularJS ديه توجيهات للربط بيانات التطبيق على سمات عناصر HTML DOM.

التوجيه-نغ المعوقين

التوجيه-نغ تعطيل يربط بيانات التطبيق AngularJS إلى السمة المعوقين من عناصر HTML.

AngularJS مثال

<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>
انها محاولة لنفسك »

وأوضح التطبيق:

التوجيه-نغ تعطيل يربط mySwitch بيانات التطبيق إلى السمة تعطيل زر HTML ل.

التوجيه نانوغرام نموذج يربط قيمة عنصر مربع HTML لقيمة mySwitch.

إذا كانت قيمة mySwitch بتقييم إلى true، سوف يتم تعطيل زر:

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

إذا كانت قيمة mySwitch بتقييم إلى false، لن يتم تعطيل زر:

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

التوجيه نانوغرام تظهر

يظهر التوجيه نانوغرام تظهر، أو يخفي عنصر HTML.

AngularJS مثال

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>
انها محاولة لنفسك »

يظهر نانوغرام تظهر التوجيه (أو جلود) عنصر HTML على أساس قيمة نانوغرام تظهر.

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

AngularJS مثال

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>
انها محاولة لنفسك »
ملاحظة في الفصل التالي، وهناك المزيد من الأمثلة، وذلك باستخدام النقر على زر لإخفاء عناصر HTML.

التوجيه نانوغرام إخفاء

التوجيه نانوغرام إخفاء يخفي أو يظهر عنصر HTML.

AngularJS مثال

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯