Question

45

angular ng-class does not react on click

rated 0 times [ 46] [ 1] / answers: 1 / hits: 21548 / 12 Years ago, fri, january 11, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

View All

answered 12 Years ago jaydenathaliam · Accepted Answer

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;

  }

}