CODEWITHSUNDEEP
angularjs
Mou
Mou

Reputation: 16312

Angular: How ng-show works

Here is a small example

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World, AngularJS</title>
    <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>
<body>

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1 ng-show="sometext">Hello {{ sometext }}</h1>

</body>
</html>

When the program runs, <h1> tag is not showing because sometext returns false to ng-show.

Why does sometext return false? Because sometext is empty or unassigned?

Upvotes: 0

Views: 368

Answers (2)

Gremash
Gremash

Reputation: 8308

Running your code you can see it working. I added a h2 element with the actual value of sometext and you can see that it is an empty string which evaluates to false in JavaScript.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello World, AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</head>
<body>

    Write some text in textbox:
    <input type="text" ng-model="sometext" />

    <h1 ng-show="sometext">Hello {{sometext}}</h1>
    <h2>Actual String {{sometext}}</h2>

</body>
</html>

Upvotes: 1

M.S.
M.S.

Reputation: 4423

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

After the ngShow expression evaluates to a truthy value and just before contents are set to visible .ng-hide class is removed and if expression evaluates to a non truthy value i.e. 0, false or null then .ng-hide class is added.

Upvotes: 0

Related Questions