AngularJS DOM

By

ng-show

ng-show directive used to show or hide the html element based on the expression or value assigned to it.ng-show directive hide or show the element by removing or adding the .ng-hide class which is predefined in the Angular. In the .ng-hide class if false value assigned to the ng-show then display property is set to none otherwise display block property is set to show the element.
Let try to understand with example:
Ng-Show Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app>



    <div>



        <div ng-show="true">My ng-show value is True. So I am Visible.</div>



        <div ng-show="false">My ng-show value is False. So I am not visible.</div>



    </div>



</body>



</html>

Output:

My ng-show value is True. So I am Visible.

Ng-show value is true of first div element so this div will show and second div will hide.

ng-hide

ng-hide directive used to hide or show the html element based on the expression or value assigned to it.ng-hide directive show or hide the element by removing or adding the .ng-hide class which is predefined in the Angular. In the .ng-hide class if true value assigned to the ng-hide then display property is set to none otherwise display block property is set to show the element.Let's try to understand with example:
Ng-Hide Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app>



    <div>



        <div ng-hide="true">My ng-hide value is True. So I am not Visible.</div>



        <div ng-hide="false">My ng-hide value is False. So I am visible.</div>



    </div>



</body>



</html>

Output:

My ng-hide value is False. So I am visible.

ng-disabled

ng-disabled directive set the element disable on which we define this directive if the assigned value to this directive is true. We can disable inputs,select list, buttons etc using this directive.Let's try to understand with example:
Ng-Disabled Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app>



    <div>



        <div class="container">



            <div class="row">



                <div class="col-md-2">



                    <input class="form-control" type="text" ng-disabled="true" />



                </div>



                <div class="col-md-2">



                    <textarea class="form-control" ng-disabled="true"></textarea>



                </div>



                <div class="col-md-2">



                    <button class="form-control" ng-disabled="true">Save</button>



                </div>



            </div>



        </div>



    </div>



</body>



</html>

Output:


ng-readonly

ng-readonly directive set the element readonly on which we define this directive if the assigned value to this directive is true. We can make inputs,select list, buttons etc readonly using this directive. Lets see the example of ng-readonly.
Ng-Readonly Example:

<!DOCTYPE html>



<html lang="en-US">



<head>



    <title>Welcome in the Angular JS</title>



    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>



</head>



<body ng-app>



    <div>



        <div class="container">



            <div class="row">



                <div class="col-md-2">



                    <input class="form-control" type="text" ng-readonly="true" />



                </div>



                <div class="col-md-2">



                    <textarea class="form-control" ng-readonly="true"></textarea>



                </div>



                <div class="col-md-2">



                    <button class="form-control" ng-readonly="true">Save</button>



                </div>



            </div>



        </div>



    </div>



</body>



</html>

Output:





No comments:

Post a Comment