CODEWITHSUNDEEP
angularjsangularjs-directive
uksz
uksz

Reputation: 18699

Dynamically Show/hide directive

I am trying to implement some directive, which will be based on the value of one variable in other Service. Here is my code:

        if (this.SomeService.variable.condition){
            element.show();
        } else {
            element.hide();
        };

However, it is called only once, when the page is bootstraped. How can I make it so that if the variable changes, the element shows/hides? Is there any way to do it without watcher?

Upvotes: 1

Views: 2629

Answers (1)

Gianmarco
Gianmarco

Reputation: 2552

You can use ng-show / ng-hide that are angularjs construct used to hide or show a particular piece of HTML.

For example:

<div ng-show="true">HELLO I AM THE FIRST DIV</div>
<div ng-hide="true">HELLO I AM THE SECOND DIV</div>

will return something like

HELLO I AM THE FIRST DIV

Inside ng-show you can put watherver kind of variable so then if your javascript is something like this:

angular.module('mymodule').controller('MyCtrl',[function(){
    var self = this;
    self.isVisible = true;
}]);

you can use that variable in your code:

<div class="container" ng-controller="MyCtrl as c">
    <div ng-show="c.isVisible">HELLO I AM THE FIRST DIV</div>
    <div ng-hide="c.isVisible">HELLO I AM THE SECOND DIV</div>
</div>

And the result is the same

Upvotes: 1

Related Questions