Последние учебники веб-разработки
 

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 элемента CheckBox к значению mySwitch.

Если значение mySwitch истинно, кнопка будет отключена:

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

Если значение mySwitch оценивается как ложное, то кнопка не будет отключена:

<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>
Попробуй сам "