CODEWITHSUNDEEP
javascriptangularjs
s.milziadi
s.milziadi

Reputation: 705

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

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.

Upvotes: 0

Views: 1108

Answers (4)

thepio
thepio

Reputation: 6263

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>

Upvotes: 1

jcubic
jcubic

Reputation: 66490

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;
};

Upvotes: 1

Doug S.
Doug S.

Reputation: 682

Check out the ngClass Directvie.

Upvotes: 0

aurelius
aurelius

Reputation: 4076

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

Upvotes: 0

Related Questions