ng-show="true" 但仍然有 class="ng-hide" angularjs答案

【问题标题】：ng-show="true" but still has class="ng-hide" angularjsng-show="true" 但仍然有 class="ng-hide" angularjs
【发布时间】：2017-10-19 03:31:07
【问题描述】：

我需要显示和隐藏一个 div。我通过将 true 或 false 值放入 ng-show 和 ng-hide 来做到这一点。我已经使用 ng-include 加载了这个页面

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

我的家.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>

对于第一次单击使用添加按钮工作正常。如果我单击查看按钮未从添加 div 中删除 class="ng-hide"。它显示如下。 activediv = false。

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

【问题讨论】：

标签： angularjs

【解决方案1】：

你需要对你的代码做一些改动

使用href="Javascript:void(0);" 代替href"#" 并使用Boolean(true) 值代替string('true') 值并使用ng-show="!activediv"> 代替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>

【讨论】：

@Hisanth 如果它有效，那么请把标记作为这个答案:)

【解决方案2】：

您唯一需要做的就是将activediv 的类型从字符串更改为布尔

用activediv=true 和activediv=false 代替activediv='true' 和activediv='false'。

ng-hide 指令需要 Boolean 值，而不是 string。

【讨论】：

我同意！你是对的。这对他有用。但是如果提问者犯了任何错误，我们应该找出代码。欢迎来到堆栈溢出。请注意：+1
好的！非常感谢

【解决方案3】：

你可以直接这样做：

首先，您必须从 href 中删除 #。其次不需要添加 class ng-hide 隐藏你的元素

<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>

【讨论】：