ng-show is not working

Question

I am using AngularJs since long time but finding a strange issue.

The below code works well

var app=angular.module("list",[]);
  app.controller("myctrl",function($scope){  
     $scope.get=function(){
        $scope.thiss = false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- This code works well-->
<div ng-app="list" ng-controller="myctrl" ng-init="thiss=true">
  <p>
    <button ng-click="get()">Click</button>
    {{thiss}}
    <p ng-show="thiss">Show Content</p>
    <p ng-show="!thiss">Hidden Content</p>
  </p>
</div>

Facing issue with below code

If I am using following code to declare ng-app and ng-controller in HTML as below, It's not working. Strange issue

<!-- This code doesn't update scope for ng-show -->

<div ng-app="list">
   <p ng-controller="myctrl" ng-init="thiss=true">
    <button ng-click="get()">Click</button>
    {{thiss}}
    <p ng-show="thiss">Show Content</p>
    <p ng-show="!thiss">Hidden Content</p>
  </p>
</div>

Is there any important concept I am missing with AngularJS.

Any help in this would be greatly appreciated.

@fatman : No, It doesn't show any console errors. – Mohit Tanwani Aug 24 '16 at 10:55 — Mohit Tanwani, Aug 24 '16 at 10:55

score 1 · Accepted Answer · edited May 23 '17 at 12:16

<p> is a block-level element. As per HTML specification

The p element represents a paragraph. It cannot contain block-level elements (including P itself).

If nested, when HTML parser encounters inner p element(<p ng-show="thiss">Show Content</p>) it will implicitly close outer <p ng-controller="myctrl"...> element.

So, once the parsing is done

<div ng-app="list">
    <p ng-controller="myctrl" ng-init="thiss=true">
        <button ng-click="get()">Click</button> {{thiss}}
    </p><!-- paragraph is implicitly closed. So, "thiss" value is not available to ng-show -->
        <p ng-show="thiss">Show Content</p>
        <p ng-show="!thiss">Hidden Content</p>
    </p>
</div>

You can find more discussion about nesting block elements here and here.

score 0 · Answer 2 · answered Aug 24 '16 at 10:51

0

the ng-init directive fails to bind to the scope of the declared controller when declared like this.

answered Aug 24 '16 at 10:51

famagusta

160
8

score 0 · Answer 3 · answered Aug 24 '16 at 11:57

0

try to use "ng-init='thiss=true'" with ng-app div.

answered Aug 24 '16 at 11:57

Rohit

93
1
6

score 0 · Answer 4 · answered Aug 24 '16 at 12:37

0

In second code you are using

tag as container which is wrong , tag can element like button and

itself which is fine but you should not put these element under

tag just remove p tag for and put div it will work fine.

answered Aug 24 '16 at 12:37

Ayush Mishra

223
1
3
4

Provide me working example with jsfiddle. Is there any official document that says you can not take tag as container or as p? – Mohit Tanwani Aug 24 '16 at 12:42
http://stackoverflow.com/questions/2226562/what-is-the-difference-between-p-and-div – Ayush Mishra Aug 24 '16 at 12:43
please go through above link you will get your answrr – Ayush Mishra Aug 24 '16 at 12:43

ng-show is not working

4 Answers4