Рубрики

AngularJS | HTML DOM

Директива ng-show и ng-hide:
Обе директивы используют, чтобы показать или скрыть элемент HTML. Это зависит от значения директив. Значения могут быть «истинными» или «ложными» .

Пример-1:

<!DOCTYPE html>

<html>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

  </script>

  

<body>

    <center>

        <div ng-app="">

            <! - ng-show = true ->

            <h1 style="color:green" ng-show="true">

              GeeksforGeeks</h1>

            

            <! - ng-show = false ->

            <p ng-show="false">GeeksforGeeks</p>

            

            <! - ng-hide = true ->

            <p ng-hide="true">ng-hide is true</p>

            

            <! - ng-hide = false ->

            <p ng-hide="false">

              A Computer Science Portal For Geeks</p>

        </div>

    </center>

</body>

  

</html>

Выход:

Директивы ng-disabled:
Это отключает атрибут элементов HTML. Он привязывает данные к атрибутам отключенного элемента HTML.
Пример-2:

<!DOCTYPE html>

<html>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

  </script>

  

<body>

    <center>

        <h1 style="color:green">GeeksforGeeks</h1>

        <div ng-app="" ng-init="mySwitch=true">

            <p>

                <button ng-disabled="mySwitch" 

                        onclick="alert('Not Disabled')">

                  Click Me!

              </button>

            </p>

            <p>

                <input type="checkbox" 

                       ng-model="mySwitch"/>

              Button

            </p>

            <p>

                {{ mySwitch }}

            </p>

        </div>

    </center>

</body>

  

</html>

Выход:

Рекомендуемые посты:

AngularJS | HTML DOM

0.00 (0%) 0 votes