使用`ng-show`显示和隐藏不按预期工作

时间:2015-09-18 15:00:27

标签: angularjs angular-directive

我正在尝试showhide搜索字段。为此,我使用单个函数并传递选项。它只有show搜索字段,但我无法隐藏它。

这里有什么问题?

这是我的代码:

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

app.controller('MainCtrl', function($scope) {

    $scope.showSearch =  false;

    $scope.searchHandler = function ( option ) {

      $scope.showSearch = option;

    }

});

html:

 <a ng-href="" ng-click="searchHandler('true')">Show</a>

    <div>

      <span ng-show="showSearch">
         <input type="text" name="quickSearch" id="quickSearch" value="Search" />
      </span>



    </div>

    <a ng-href="" ng-click="searchHandler('false')">Hide</a>//not working

Live Demo

6 个答案:

答案 0 :(得分:1)

你必须假装不是假的&#39;到showSearch函数 显示

<div>

  <span ng-show="showSearch">
     <input type="text" name="quickSearch" id="quickSearch" value="Search" />
  </span>



</div>

<a ng-href="" ng-click="searchHandler(false)">Hide</a>

答案 1 :(得分:1)

删除searchHandler('false')调用中'false'周围的单引号。

即。

您目前有:ng-click =“searchHandler('false')”

将其更改为:ng-click =“searchHandler(false)”

答案 2 :(得分:1)

你必须传递一个布尔值而不是一个字符串,所以你只需要取出引号

<a ng-href="" ng-click="searchHandler(false)">Hide</a>

答案 3 :(得分:0)

删除单引号字符。应为searchHandler(false)searchHandler(true)

答案 4 :(得分:0)

更简单,可以完全删除该功能,只需切换布尔值:

<a ng-click="showSearch = !showSearch">Hide</a>

OR

<a ng-click="showSearch = false">Hide</a>

答案 5 :(得分:0)

删除单引号应该有效

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');      </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

<a ng-href="" ng-click="searchHandler('true')">Show</a>

<div>

  <span ng-show="showSearch">
     <input type="text" name="quickSearch" id="quickSearch" value="Search" />
  </span>



</div>

<a ng-href="" ng-click="searchHandler(false)">Hide</a>

</body>

</html>