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.
4 answers
solution1
1 ACCPTED 2016-05-23 13:32:35
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>
solution2
1 2016-05-23 13:33:20
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;
};
solution3
0 2016-05-23 13:32:10
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
solution4
0 2016-05-23 13:33:19
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.