MouradK
MouradK

Reputation: 1567

ng-show doesn't work in scope

I'm trying to show/hide something using angular but when it's called via $scope it doesn't work. If I change the show variable with ng-model it works fine.

<div id="editClient"
     class="accordeon panel-group" 
     role="tablist" 
     aria-multiselectable="true" 
     ng-show="show">
     ....
</div>

And in my script this doesn't work.

client.controller('clientController', function($scope) {
  $scope.show = true;

  $scope.test = function() {
    alert('clicked'); 
    $scope.show = true;
}

The "clicked" is shown and I tried to use $apply, too, but result is the same.

But when I use ng-model it works

<input type="checkbox" value="true" ng-model="show">

Can someone explain me why it doesn't work with $scope.show ?

Upvotes: 1

Views: 2818

Answers (2)

Sunil Madan
Sunil Madan

Reputation: 447

Following works fine using $scope. See jsfiddle

http://jsfiddle.net/ffKTy/312/

Upvotes: 0

Mikko Viitala
Mikko Viitala

Reputation: 8394

Debug.

Following works just fine using checkbox with ng-bind and button firing function in controller.

<input type="checkbox" ng-model="show">Toggle visibility
<br>
<button type="button" ng-click="toggle()">Toggle visibility</button>
<hr>
<div ng-show="show">Visible</div>
<div ng-show="!show">Hidden</div>

app.controller('Ctrl', function($scope, $http) {
  $scope.show = true;

  $scope.toggle = function() {
    $scope.show = !$scope.show;
  };
});

Upvotes: 1

Related Questions