CODEWITHSUNDEEP
angularjs
Ram
Ram

Reputation: 923

ng-show not working inside ng-if section

ng-show is not working in following code

<button ng-click="itemIndex=0;showHome=true;" class="btn btn-link">Home</button>

<div ng-if="itemIndex==0">
    <div ng-show="showHome">{{showHome}}
        <h3>Home Section</h3>
        <img ng-click="showHomeItems=showHomeItems?false:true;showHome=false;" ng-src="images/home.png"/>
    </div>
    <div ng-show="showHomeItems">
        Home Items{{showHome}}
    </div>
</div>

Without ng-if it is working fine but with ng-if its not working.

Upvotes: 0

Views: 690

Answers (2)

Nattu Raju
Nattu Raju

Reputation: 310

Try declaring a variable like this:

$scope.switch = {showHome : true}

and then use it in the html like this:

<div ng-show = "switch.showHome" >

Upvotes: 0

Omri Aharon
Omri Aharon

Reputation: 17064

Read this article.

There are some directives in Angular that create a child scope, like ng-repeat, ng-if.

Inside those scopes, the booleans (such as showHome) are searched only within that new scope, and not in the parent scope.

In order to avoid such bugs, it's considered best practice to place the logic in the controller (or service, just not in the HTML) inside an object, which is not a primitive variable and will be looked up in the scope prototypical chain.

Upvotes: 1

Related Questions