ng-show 不隐藏按钮

Question

我有一个有更多选项的选择器，如果选择器的第一个选项被选中，我想隐藏一个按钮。

<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 = "";
  }
}

为什么不起作用？

Answer 1

应该是，

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

Answer 2

你可以试试这个：

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

Answer 3

您的 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>

Answer 4

主要问题是您使用了相同的双引号，而您应该使用不同的双引号。

<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>

您不一定需要检查是否为真，但从维护和可读性的角度来看确实有帮助。

同样可以用类似的东西来完成：

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

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

Answer 5

这三种方式都可以

一个

ng-hide="$ctrl.type==''"// correct way and related naming functionality

两个

ng-show ="$ctrl.type!=''"// correct way but unrelated naming for the functionality

三个

ng-if="$ctrl.type!=''" // correct way without render the DOM elements

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

ng-show 不隐藏按钮

ng-show does not hide a button

javascript

angularjs

ng-show

一个

两个

三个