ng-show不会隐藏按钮

时间:2018-04-19 09:45:51

标签: javascript angularjs ng-show

我有一个包含更多选项的选择器,如果选择了第一个选项,我想隐藏一个按钮。

<select ng-model="$ctrl.type">
    <option value="">none</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

可以看出,第一个选项有value =""

这是按钮:

    <div ng-show="$ctrl.type!=""" class="btn action-btn" ng-click="$ctrl.doSomething()">
        my button
    </div>

在控制器内我有这段代码:

class MyCtrl {
  constructor(...) {
    ...
  }

  doSomething() {
    this.type = "";
  }
}

为什么不起作用?

5 个答案:

答案 0 :(得分:3)

应该是,

<div ng-show="ctrl.type!=''" class="btn action-btn" ng-click="$ctrl.doSomething()">

答案 1 :(得分:2)

你可以试试这个:

MERGE #TableB AS Tgt
    USING (SELECT * FROM #TableA) Src
    ON (Tgt.Identifier = SRc.Identifier)  
    WHEN MATCHED THEN   
        UPDATE SET Date = Src.Date, ...
    WHEN NOT MATCHED THEN  
        INSERT (Identifier, Date, ...)  
        VALUES (Src.Identifier, Src.Date, ...);

答案 2 :(得分:2)

您的ng-show条件不正确,因为它没有检查空值。要使其工作,您需要将代码更改为,

<div ng-show="ctrl.type!=''" class="btn action-btn" ng- 
 click="$ctrl.doSomething()">
    my button
</div>

您可以进一步增强此功能,以便使用trim()摆脱ctrl.type的空格,并在比较期间获得正确的结果。为此你可以使用,

<div ng-show="ctrl.type.trim()!=''" class="btn action-btn" ng- 
 click="$ctrl.doSomething()">
    my button
</div>

答案 3 :(得分:2)

主要问题是当你使用不同的双引号时,你使用相同的双引号。

<div ng-show="ctrl.type !== ''" class="btn action-btn" ng-click="$ctrl.doSomething()">
        my button
</div>

这就是说我会为此使用布尔标志,因为它使代码和检查更容易阅读和理解:

doSomething() {
    if ( type !== '' )
    this.showForType = true;
  }


<div ng-show="ctrl.showForType === true" class="btn action-btn" ng-click="$ctrl.doSomething()">
        my button
</div>

您不一定需要检查是否为true,但从维护和可读性的角度来看它确实有用。

同样可以通过以下方式完成:

<div ng-show="ctrl.showForType" class="btn action-btn" ng-click="$ctrl.doSomething()">
        my button
</div>

如果角度控制的UI元素的任何部分显示而未设置正确的状态,则可以使用ng-cloak来阻止这种情况发生:https://docs.angularjs.org/api/ng/directive/ngCloak

答案 4 :(得分:0)

你可以通过这三种方式来实现

一个

  

ng-hide="$ctrl.type==''" //正确的方式和相关的命名功能

2

  

ng-show ="$ctrl.type!=''" //正确的方式但不相关的功能命名

3

  

ng-if="$ctrl.type!=''" //无需渲染DOM元素的正确方法

请检查:what is the difference between ng-if and ng-show/ng-hide