Angular ng-show (or ng-if) not updating on value change

ng-show
D Durham picture D Durham · Apr 30, 2015 · Viewed 14.9k times · Source

I have a simple example at plunker. I have an ng-show on one element and a select as another element. The select should toggle showing/hiding the other (input) element. Initially setting the select to Yes shows the other input element as expected. Then setting the select to No does toggle the scope value to false as expected, but does not hide the input element.

I've scoured the other posts related to this and the ones I found are around having or not having {{}} on the ng-show (I don't as it should be) or not having the value on $scope (which I do). I thought is may be a $scope.apply() issue, but then why does the 1st change to Yes work? Also adding the apply still does not make the No(false) work. What am I missing?

TIA!

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.conf = {};
});

Answer

Dinesh Dabhi picture Dinesh Dabhi · Apr 30, 2015

You need to check ng-show="conf.is_ieee=='true'" instead of ng-show="conf.is_ieee". Check this plunker. 

<div class="col-md-4" ng-show="conf.is_ieee=='true'">
    <label class="form-label">IEEE Conference ID:</label>
    <input type="text" class="form-control" name="ieee-id" ng-model="conf.ieee_id"/>
  </div>

http://plnkr.co/edit/MXvuhSPB0ChJyDrvPI55?p=preview

Related questions

AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation

I am trying to show / hide some HTML using the ng-show and ng-hide functions provided by AngularJS. According to the documentation, the respective usage for these functions are as follows: ngHide – {expression} - If the expression truthy then the element …

Read More
How do I toggle an ng-show in AngularJS based on a boolean?

I have a form for replying to messages that I want to show only when isReplyFormOpen is true, and everytime I click the reply button I want to toggle whether the form is shown or not. How can I do …

Read More
Why is this simple AngularJS ng-show not working?

I cannot figure out why my simple AngularJS app not working as intended. "Loading..." is supposed to be hidden, and "Done!" should be shown after 1 second. html: <div ng-app> <div ng-controller="TestCtrl"> <div class="text-center" …

Read More