Компьютерапия

AngularJS - HTML DOM

Категория: AngularJS
Просмотров: 3844

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

# Имя Описание
1ng-disabledотключает данный элемент управления.
2ng-showпоказывает данный контроль.
3ng-hideскрывает данный элемент управления.
4ng-clickпредставляет собой событие щелчка по AngularJS.

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

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

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

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

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

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

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

Добавьте атрибут 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>

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

Пример

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

<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 = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     
   </body>
</html>
Disable Button
Show Button
Hide Button

Total click: {{ clickCounter }}



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok