ng-show does not hide a button

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?

score 2 · Answer 1 · edited Apr 19 '18 at 10:10

2

It should be as,

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

edited Apr 19 '18 at 10:10

Ramesh Rajendran

37,412
45
153
234

answered Apr 19 '18 at 09:47

Sajeetharan

216,225
63
350
396

1

don't you mean `ng-show="ctrl.type!=''"`? I think it is an extra `"` in yours but still does not work – Leo Messi Apr 19 '18 at 09:49
@LeoMessi May be that's the typo issue from the answer-er. I have changed . – Ramesh Rajendran Apr 19 '18 at 10:11

score 2 · Answer 2 · answered Apr 19 '18 at 09:51

2

You can try this :

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

answered Apr 19 '18 at 09:51

Sudhir Ojha

3,247
3
14
24

score 2 · Answer 3 · answered Apr 19 '18 at 09:51

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>

Andrei Dragotoniu · Accepted Answer · 2018-04-19T10:01:09.077

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

it seems pretty correct. I just observed that when the page loads for a little of time there is the button on the screen, maybe it does the check from ng-show later, I tried to use an ng-hide with the negated condition but still it stays on the screen at the beginning — Leo Messi, Apr 19 '18 at 09:59

Ramesh Rajendran · Answer 5 · 2018-04-19T10:12:17.123

0

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

edited Apr 19 '18 at 10:12

answered Apr 19 '18 at 10:07

Ramesh Rajendran

37,412
45
153
234

ng-show does not hide a button

5 Answers5

one

two

three