Disable, Show, Hide & Counter

AngularJS Disable, Show, Hide & Counter

by Paola D'Antonio

HTML

<html>

  <head>
    <title>Disable, Show, Hide & Counter </title>
  </head>

  <body>
    <h2>AngularJS Disable, Show, Hide & Counter </h2>
    <div ng-app="">

      <table border="5">
        <tr>
          <td>
            <input type="checkbox" ng-model="DisableButton">Disable Button</td>
          <td>
            <button ng-disabled="DisableButton">Click Me!</button>
          </td>
        </tr>

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

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

        <tr>
          <td>
            <p>Total clicks: {{ Counter }}</p>
          </td>
          <td>
            <button ng-click="Counter = Counter + 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>