Question

我需要显示和隐藏div。我通过在false-show和ng-hide中添加false值来实现。我已使用ng-include

加载此页面

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

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

首次单击使用添加按钮正常工作。如果我单击视图按钮而不是从添加div中删除class =“ng-hide”。它显示如下。 activediv = false。

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

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

Answer 2

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

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

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

Answer 3

您可以直接这样做：

首先，您必须从#中删除href。其次没有必要补充类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>

ng-show =“true”但仍然有class =“ng-hide”angularjs

3 个答案: