angular ng-class does not react on click

Question

I am trying to use ng-class and bind a class to an expression so, that I can unit test the expression binding. But, it seems that I am missing something.

The button:

<li><a class=""  ng-click="onAddInterface()"><i class="icon-plus-sign"></i> add interface </a></li>

The panel that should collapse and expand:

<div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>

the function that is fired

$scope.onAddInterface=function(){
  $scope.showCreateNewInterfacePanel=true;
}

anyway clicking the link nothing happens.

Am I missing something?

How could we know if you're missing something without seeing all of the code? — Ben Lesh
– Ben Lesh, Commented Jan 11, 2013 at 19:02

bmleite · Accepted Answer · 2013-01-14 10:37:37Z

4

I'm not sure if this is how you are really defining your $scope.onAddInterface function or if it is just an example... Nevertheless you should be doing it like this:

$scope.onAddInterface = function() {
  $scope.showCreateNewInterfacePanel = true;
}

update

Also make sure the link and the collapsible element are under the same $scope/Controller:

<div ng-controller="Ctrl">
  ...
  <a ng-click="onAddInterface()">add interface</a>
  ...
  <div class="collapse" ng-class="{in:showCreateNewInterfacePanel}"><div>
  ...
</div>

Controller:

function Ctrl($scope) {
  $scope.onAddInterface = function() {
    $scope.showCreateNewInterfacePanel = true;
  }
}

edited Jan 14, 2013 at 10:37

answered Jan 11, 2013 at 15:09

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mark Rajcok Over a year ago

Working fiddle,with only @bmleite's change. This fiddle shows that class "in" is being applied when you click. If it still doesn't work for you, then there may be something wrong with the CSS (not Angular).

Adelin Over a year ago

Thanks for the reply but it still does not work, tried with simpler custom css and it still not working !!!!!!!!

bmleite Over a year ago

Are sure the link is accessing the correct $scope? Does your onAddInterface function ever get called? Can you provide a bigger snippet from the HTML you are really using?

Adelin Over a year ago

Yes, the problem was in the scope. would you mention it in your answer to accept it as the best answer ? the problem was that the collapsible element was out of the scope of the controller :)

Craig Ulliott · Accepted Answer · 2014-10-14 04:20:19Z

4

I had a very similar problem and was able to solve this problem by placing 'in' in quotes. It is a string, and not a variable.

  ...
  <div class="collapse" ng-class="{'in':showCreateNewInterfacePanel}"><div>
  ...

answered Oct 14, 2014 at 4:20

Craig Ulliott

1,9761 gold badge11 silver badges7 bronze badges

Collectives™ on Stack Overflow

angular ng-class does not react on click

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related