Учебники

AngularJS — HTML DOM

Октябрь 23, 2018

Следующие директивы используются для привязки данных приложения к атрибутам элементов HTML DOM:

Sr.No. Имя и описание
1

нг-инвалидов

отключает данный элемент управления.

2

нг-шоу

показывает данный контроль.

3

нг скрыть

скрывает данный контроль.

4

нг-клик

представляет событие нажатия AngularJS.

нг-инвалидов

отключает данный элемент управления.

нг-шоу

показывает данный контроль.

нг скрыть

скрывает данный контроль.

нг-клик

представляет событие нажатия AngularJS.

Директива по инвалидности

Добавьте атрибут ng-disabled к кнопке HTML и передайте ей модель. Привязать модель к флажку и увидеть вариант. 

<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

Директива нг-шоу

Добавьте атрибут ng-show к кнопке HTML и передайте ей модель. Привязать модель к флажку и увидеть вариант. 

<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

Директива нг-скрытия

Добавьте атрибут ng-hide к кнопке HTML и передайте ей модель. Привязать модель к флажку и увидеть вариант. 

<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

ng-click директива

Добавьте атрибут ng-click к кнопке HTML и обновите модель. Свяжите модель с HTML и посмотрите вариацию. 

<p>Total click: {{ clickCounter }}</p>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>

пример

В следующем примере показано использование всех вышеупомянутых директив.

testAngularJS.htm

Live Demo 

<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">Disable Button</td>
               <td><button ng-disabled = "enableDisableButton">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide1">Show Button</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
            </tr>
            <tr>
               <td><input type = "checkbox" ng-model = "showHide2">Hide Button</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
            </tr>
            <tr>
               <td><p>Total click: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">Click Me!</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 в веб-браузере и посмотрите результат.

50
Share: