Question

我创建了一个像angularjs一样的按钮，

 <button class="btn btn-setting" ng-click="showSearch = ! showSearch" > 
  <img src="theme/images/settings.png" width="111">
 </button>

和div一样，

<div  ng-include="'pages/include/search.html'" ng-show="showSearch" ></div>

我需要在按钮点击时切换上面div的可见性。但它没有显示。

Answer 1

按如下所示更新 showSearch 模型

$scope.showSearch = {hideShowSearch : false}

更新了HTML

<button class="btn btn-setting" ng-click="showSearch.hideShowSearch = ! showSearch.hideShowSearch" > 
  <img src="theme/images/settings.png" width="111">
 </button>

 <div  ng-show="showSearch.hideShowSearch" >This is the test</div>

编辑 -

在你的脚本中 hideShowSearch 是原始的。所以它不会执行双向数据绑定。结果你没有得到预期的结果。

Answer 2

只做

<button ng-click="setshowme(show)"></button>

$scope.setshowme = function (value) {
    if(value == true){
      $scope.show = false;
    }else{
      $scope.show = true
    }
}

Answer 3

这是simple JSFiddle

<button class="btn btn-setting" ng-init="showSearch = true" ng-click="showSearch = (showSearch) ? false : true;" > 
    <img src="theme/images/settings.png" width="111" />
</button>

<div ng-show="showSearch">Hello World</div>

Answer 4

首先检查两个<button>

中的这两个元素（<div>＆amp; ng-controllers）

如果是这样，那么这将无效，因为ng-controller拥有自己的scopes。因此showSearch在一个范围内，而其他控制器范围不能直接访问它。

然后查看类似的内容，

<div ng-show='showSearch'>show / hide div ...</div>

并查看此div是否正在切换其可见性。

如果它正常工作

然后检查src ng-include的路径是否正确。

这是一个DEMO

在ng-click上的Angularjs ng-show不起作用

4 个答案: