Question

我试图根据类型的选择显示/隐藏分区（使用单选按钮）。

以下是单选按钮的代码：

<div class="col-md-7 checkbox-inline" >
    <label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" checked value="itas">ITAS</label> 
    <label><input type="radio" id="authentication-type" ng-model="authenticationType" name="authenticationType" value="ldap">LDAP</label>
</div>

非工作版

这里我试图在比较时删除区分大小写。表达式的值

{{ (authenticationType | lowercase)   == 'itas' }}
{{ (authenticationType | lowercase)   == 'ldap' }}

正在改变，但是下面的div的显示/隐藏不起作用

<div ng-show="{{ (authenticationType | lowercase)   == 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase)   == 'ldap' }}">LDAP</div>

工作版

我在这里进行简单的比较并且工作正常。

<div ng-show="{{ (authenticationType | lowercase)   === 'itas' }}">ITAS</div>
<div ng-show="{{ (authenticationType | lowercase)   === 'ldap' }}">LDAP</div>

我能够继续前进，但我只是想知道为什么会这样。如果有人能对它有所启发，那将是非常好的。

Answer 1

跟进Pankaj的回答，ng-show采用表达式（https://docs.angularjs.org/api/ng/directive/ngShow）：

ngShow指令显示或隐藏基于的给定HTML元素表达式提供给ngShow属性。

此处的关键字是表达式。即，ng-show采用javascript表达式来确定是否显示或隐藏元素。我通常会这样写：

<div ng-show="authenticationType.toLowerCase() == 'itas'">ITAS</div>
<div ng-show="authenticationType.toLowerCase() == 'ldap'">LDAP</div>

n.b。这里的epxressions与{{ }}不同，后者称为标记。您可以将此与带有标记的ng-src指令进行比较，而不是表达式：https://docs.angularjs.org/api/ng/directive/ngSrc。

ng-show value更改为true false但ng-show不起作用

1 个答案: