AngularJS - add style/class to parent element when button is clicked

Question

In my application I've a list of Product IDs that an user can assign to "Hot" or "Cold" by clicking on a button.

This is how this list is displayed:

And this is how it is created:

<table>
   <tr ng:repeat="acq in WaterList">
      <td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
      <td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAC(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">HOT</button></td>
      <td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAF(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">COLD</button></td>
   </tr>
</table>

I would like to add a style to the parent <td> of a button to add a class, for example to add a border to show what button was clicked.

How can I do this with Angular?

Another idea could be to add bootstrap class disabled (not using ng-disabled or disabled HTML attribute, because buttons should remain clickable) to the not clicked button.

You can use "node_var.parentNode" to climb the DOM tree. "this" will reference the element listening to the event. "event_var.target" will reference the clicked element. — Kulvar
– Kulvar, Commented May 23, 2016 at 13:29

thepio · Accepted Answer · 2016-05-23 15:08:08Z

1

You could do it like this.

HTML:

<table>
  <tr ng:repeat="acq in WaterList">
    <td style="padding:5px 20px">{{acq.ProductNumber}}</td>
    <td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===1}" class="btn btn-primary" type="button" ng-click="updAC($index, 1)">HOT</button></td>
    <td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===2}" class="btn btn-primary" type="button" ng-click="updAF($index, 2)">COLD</button></td>
  </tr>
</table>

Controller:

$scope.updAC = function(index, set) {
  $scope.index=index;
  $scope.set=set;
};

$scope.updAF = function(index, set) {
  $scope.index=index;
  $scope.set=set;
};

CSS:

button.active {
  border-bottom: 2px solid #000000;
}

I left out all your other variables etc just to test it, but you probably know how to implement it to your own html and functions. You can also do variations with this. For example set different border or what ever on when clicking "HOT" or "COLD".

EDIT based on comments:

You could toggle the class like this:

tr.hot button.hot {
  border: 2px solid red;
}

tr.cold button.cold {
  border: 2px solid blue;
}

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>

<body ng-controller='testCtrl'>
    <h1>Your Order</h1>
    <table>
      <tr ng:repeat="acq in WaterList">
        <td style="padding:5px 20px">{{acq.ProductNumber}}</td>
        <td style="padding:5px 20px"><button class="btn btn-primary hot" type="button" ng-click="updAC($event, 'hot')">HOT</button></td>
        <td style="padding:5px 20px"><button class="btn btn-primary cold" type="button" ng-click="updAF($event, 'cold')">COLD</button></td>
      </tr>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
function testCtrl($scope) {
  $scope.WaterList = [
    {
      'ProductNumber': 1
    },{
      'ProductNumber': 2
    },{
      'ProductNumber': 3
    }
  ];
  
  $scope.updAC = function(element, set) {
    var tr = angular.element(element.target).parent().parent();
    tr.removeClass('hot');
    tr.removeClass('cold');
    if (tr.hasClass(set)) {
      tr.removeClass(set);
    } else {
      tr.addClass(set);
    }
  };

  $scope.updAF = function(element, set) {
    var tr = angular.element(element.target).parent().parent();
    tr.removeClass('hot');
    tr.removeClass('cold');
    if (tr.hasClass(set)) {
      tr.removeClass(set);
    } else {
      tr.addClass(set);
    }
  };
}
</script>
</body>
</html>

edited May 23, 2016 at 15:08

answered May 23, 2016 at 13:32

thepio

6,2635 gold badges38 silver badges55 bronze badges

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

3 Comments

s.milziadi Over a year ago

I've tried your solution but the "active" selection is not kept for each clicked button, but changed everytime.

thepio Over a year ago

Oh, that's the way you want it? For each button or should it be between hot and cold? So when a user chooses hot and if cold was chosen before it will toggle the class from cold to hot? If my explanation has any sense.

s.milziadi Over a year ago

It should be between hot and cold for each Product Id. And yes, your explanation make sense.

jcubic · Accepted Answer · 2016-05-23 13:33:20Z

pass object to updAF and updAC functions and add ng-class with object property:

<table>
   <tr ng:repeat="acq in WaterList">
      <td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
      <td style="border:0; padding:5px 20px" ng-class="{hot: acq.hot}"><button class="btn btn-primary" type="button" ng-click="updAC(acq)">HOT</button></td>
      <td style="border:0; padding:5px 20px"ng-class="{cold: acq.cold}"><button class="btn btn-primary" type="button" ng-click="updAF(acq)">COLD</button></td>
   </tr>
</table>

and add property to acq in updAF and updAC functions:

$scope.updAF = function(acq) {
   acq.cold = true;
   acq.hot = false;
};
$scope.updAC = function(acq) {
   acq.hot = true;
   acq.cold = false;
};

aurelius · Accepted Answer · 2016-05-23 13:32:10Z

0

you can do this using a hr tag instead of a button from css.

<a id="btn" href="#btn">Demo</a>

here you have a fiddle

answered May 23, 2016 at 13:32

aurelius

4,1149 gold badges43 silver badges78 bronze badges

Comments

Doug S. · Accepted Answer · 2016-05-23 13:33:19Z

0

Check out the ngClass Directvie.

answered May 23, 2016 at 13:33

Doug S.

6822 gold badges10 silver badges26 bronze badges

Collectives™ on Stack Overflow

AngularJS - add style/class to parent element when button is clicked

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related