ng-show不会隐藏按钮

Question

I have a selector with more options, I want to hide a button if the first option of the selector is selected.

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

as it can be seen, the first option has value ="" .

This is the button:

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

inside the controller I have this code:

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

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

Why doesn't it work?

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

Your ng-show condition is incorrect as it is not checking the empty value. To make it work you need to change your code to,

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

You can further enhance this to use trim() to get rid of whitespaces from ctrl.type and get proper result during comparison. For this you can use,

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

Answer 4

the main issue is that you are using the same double quotes when you should be using different ones.

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

This being said I would use a Boolean flag for this, because it makes the code and the checks much easier to read and understand:

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


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

you don't necessarily need a check for true, but it does help from a maintenance and readability point of view.

The same could be done with something like:

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

If any part of your angular controlled UI elements show while the right states are not set you can use ng-cloak to stop that from happening : https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 5

You can do it by these three ways

one

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

two

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

three

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

---

Kindly check : what is the difference between ng-if and ng-show/ng-hide