Add and remove class when element clicked with Angular

Question

I would like to know how to add or remove a class to an HTML element when a div is clicked with AngularJS. I have a div that when clicked I need to check if it includes a class('already-member') or not. If the class exist, then remove it, and if it does not, then add it. I know how to do this in Javascript but not sure in Angular.

tab-members.html

<div collection-repeat="friend in user.friends" item-width="50%" item-height="80px" class="friends-list">
  <div class="item friend-avatar" ng-class="{'already-member' : friend.already_member == true}" ng-click="toggleStatus()">
    <div class="avatar">
      <img src="{{friend.avatar_url}}">
      <i class="check-icon" ng-class="{'hidden' : friend.already_member == false}"></i>
    </div>
    <div class="wrapper-friend-name">
      <p class="friend-name">{{friend.name}}</p>
    </div>
  </div>
</div>

this is the code in controllers.js

.controller('MembersCtrl', function($scope) {
  $scope.members = [
    {avatar_url: "http://..."},
    {avatar_url: "http://..."},
    {avatar_url: "http://..."},
    {avatar_url: "http://..."}
  ];
  $scope.user = {
    avatar_url: "http://...",
    friends: [
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: true},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false},
      {avatar_url: "http://...", name: "Pablo Pepunto", already_member: false}
    ]
  }
  $scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
  });
  $scope.toggleStatus = function($scope) {
    console.log('$scope'); //$scope is undefined
    $scope.classList.toggle('already_member');
    $scope.already_member = !$scope.already_member;

  }
})

On a side note, you should use === instead of ==. Shallow equals can sometimes lead to unintended results. — Patrick Motard
– Patrick Motard, Commented Feb 6, 2016 at 20:55

FlorianTopf · Accepted Answer · 2016-02-06 20:54:18Z

2

I would do the following:

In the template:

ng-click="toggleStatus(friend)"

In the controller:

$scope.toggleStatus = function(friend) {
    friend.already_member = !friend.already_member;
}

Then the ng-class="{'hidden' : friend.already_member == false}" directive you defined should work.

answered Feb 6, 2016 at 20:54

FlorianTopf

9487 silver badges11 bronze badges

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

Comments

Martin Golpashin · Accepted Answer · 2016-02-07 19:10:24Z

1

Add a ng-click Listener on your div element. When the click is triggered, toggle a boolean variable isMember in your controller to set the class.
Use the ng-class directive with your isMember variable on your div to check whether isMember is set or not: ng-class="{'already-member': isMember}"

You could also set and use the variable directly like this:

<div ng-click="isMember = !isMember" ng-class="{'already-member': isMember}">

I recommend setting the flag in your controller for better readability.

edited Feb 7, 2016 at 19:10

answered Feb 6, 2016 at 20:53

Martin Golpashin

1,0629 silver badges28 bronze badges

3 Comments

David Soler Over a year ago

With this solution I would have to define isMember in the controller to true or false. But I can't set it that way beacuse it depends from the Boolean of friend.already_member

Martin Golpashin Over a year ago

The replace isMember by friend.already_member. It does not matter how you name your variables

David Soler Over a year ago

ok. It has worked it by replacing friend.already_member for isMember. Thanks for your help

Collectives™ on Stack Overflow

Add and remove class when element clicked with Angular

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related