ng-show="true" but still has class="ng-hide" angularjs

0
votes

I need to show and hide a div. I do it by putting true of false values into the ng-show and ng-hide. I have load this page using ng-include

<body ng-app="myApp" ng-controller="FirstCtrl">
    <div ng-include="home.html">
    </div>
</body>

My home.html

<div ng-controller="SubCateCtrl" ng-init="activediv='true'">
    <div class="bcreamb" >
        <a style="" href="#" ng-click="activediv='true'">View</a> &nbsp; &nbsp; <a ng-click="activediv='false'" href="#">Add</a>
    </div>
    <div ng-show="activediv">
        <h1>
            View</h1>
    </div>
    <div ng-hide="activediv">
        <h1>
            Add</h1>
    </div>
</div>

For first click Working fine with add button. If I click view button not removing class="ng-hide" from Add div. it shows like as follows. activediv = false.

<div ng-hide="activediv" class="ng-hide">
3
angularjs

3 Answers

2
votes

You need to do few changes on your code

Use href="Javascript:void(0);" instead of href"#" and use Boolean(true) value instead of string('true') value and use ng-show="!activediv"> instead of ng-hide="activediv">

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {   
        
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MyCtrl" ng-init="activediv=true">
    <div class="bcreamb" >
        <a style="" href="Javascript:void(0);" ng-click="activediv= true">View</a> &nbsp; &nbsp; <a ng-click="activediv=false"  href="Javascript:void(0);">Add</a>
    </div>
    <div ng-show="activediv">
        <h1>
            View</h1>
    </div>
    <div ng-show="!activediv">
        <h1>
            Add</h1>
    </div>
</div>
1
votes
  • The only thing that you need to do is to change the type of activediv from string to bool

Put activediv=true and activediv=false instead of activediv='true' and activediv='false'.

ng-hide directive requires a Boolean value, not a string.

-1
votes

You can directly do in this way:

Firstly you have to remove # from the href. Secondly no need to add class ng-hide to hide your element

<div ng-controller="SubCateCtrl" ng-init="activediv='true'">
    <div class="bcreamb" >
        <a style="" href="" ng-click="activediv='true'">View</a> &nbsp;&nbsp; 
        <a ng-click="activediv='false'" href="">Add</a>
    </div>
    <div ng-show="activediv">
        <h1>
            View</h1>
    </div>
    <div ng-show="!activediv">
        <h1>
            Add</h1>
    </div>
</div>