2016-05-09 132 views
0

HTML为什么ng-show不起作用?

<div class="col-sm-1"> 
    <a class="a" ng-click="aa()"> 
     <span name="yesLink"></span> 
    </a>    
</div>             
<div class="col-sm-1"> 
    <a class="a" ng-click="bb()">   
    <span name="NoLink"></span>   
    </a> 
</div> 
<div id="nnn" class="col-sm-7" align="left" > 
    <p ng-show="yes"> Text for yes</P> 
    <p ng-show="no"> Text for no</P> 
</div> 

JS

yesLink.onclick()=function() 
{ 
     scope.yes=true; 
} 

noLink.onclick()=function() 
{ 
     scope.no=true; 
} 

我已经使用上述code.I要显示根据click.But它不工作的消息。这段代码有什么问题? 如果单击yesLink,则会出现“Text for Yes”,如果单击NoLink,则应出现“Text for no”。

回答

0

您正在检查的值是一个布尔值,但您分配给该变量的值是一个字符串。您有两个选项>

选项1: 告诉ng-hide/show值查找字符串值, ng-show =“yes ==='true'”。

选项2: 在你的函数换出字符串布尔值, scope.yes =真实,不scope.yes =“真”

2

我认为,没有必要添加的onclick方法。只是这样做

<div class="col-sm-1"> 
<a class="a" ng-click="yes=true"> 
    <span name="yesLink"></span> 
</a>    
</div>             
<div class="col-sm-1"> 
    <a class="a" ng-click="yes=false;">   
     <span name="NoLink"></span>   
    </a> 
</div> 
<div id="nnn" class="col-sm-7" align="left" > 
    <p ng-show="yes"> Text for yes</P> 
    <p ng-hide="yes"> Text for no</P> 
</div> 
+1

你可以使用'NG隐藏= “是”',而不是'NG秀= “是!”'以提高可读性。 – Ankh

+0

是的,你是对的@Ankh。 –

2

我看到角在上面的代码被用于这样的HTML部分将

控制器部分应该是这样

考虑BB()和AA()作为点击功能

$scope.bb = function(){ 
$scope.yes = true; 
} 

$scope.aa = function(){ 
$scope.no = true; 
} 
0

无需jQuery的,你可以使用ng-click,NG-点击触发功能CONTROLER

<div class="col-sm-1"> 
    <a class="a" ng-click="aa()"> 
     <span name="yesLink"></span> 
    </a>    
</div>             
<div class="col-sm-1"> 
    <a class="a" ng-click="bb()">   
    <span name="NoLink"></span>   
    </a> 
</div> 
<div id="nnn" class="col-sm-7" align="left" > 
    <p ng-show="yes"> Text for yes</P> 
    <p ng-show="no"> Text for no</P> 
</div> 

JS

scope.aa() = function(){ 
    scope.yes = true; 
} 

scope.bb() = function(){ 
    scope.no = true; 
}