selected table row angular.js

Question

I have a table with the ng-class directive like this:

<tbody>
      <tr style="cursor: pointer" class="clickable-row" ng-repeat="firm in device.firmwares" ng-class="{'success': firm.vulnScore<= 4,'warning' :5<= firm.vulnScore,'danger' : 8<=firm.vulnScore}">
          <td>{{firm.fileName}}</td>
          <td>{{firm.extracted}}</td>
          <td>{{firm.vulnScore}}</td>
          <td>{{firm.date}}</td>
      </tr>
</tbody>

Basically what it does, is to color the rows depending on the vulnScore value; that works great!, but I need to be able to select the rows, I acomplished that by doing:

$('#firm_table').on('click', '.clickable-row', function(event) {
    $(this).addClass('bg-primary').siblings().removeClass('bg-primary');
});

and it works...but the only thing that it does is to change the text white, because there's already a color class acting on it... I need to be able to remove the acting class(success,warning or danger) when is selected and put it back when another is selected, i'd be easy if there was just one class...but I don't know how to know which one I had in the first place and how to put it back!

This is what I have:(the first row is selected):

What I acomplished

and what I what to acomplish is something like:

What I actually want

if someone can help i'd really appreciate it!

Hadi · Accepted Answer · 2016-03-23 19:27:24Z

2

try this.

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.rowIndex = -1;
  $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"amir","score":7},{"name":"amir","score":5},{"name":"asd","score":10},{"name":"jim","score":8},{"name":"babak","score":6},{"name":"vfrt","score":8},{"name":"cdsa","score":7},{"name":"amir","score":10},{"name":"majid","score":3}];
 
  $scope.selectRow = function(index){
      if(index == $scope.rowIndex)
        $scope.rowIndex = -1;
        else
          $scope.rowIndex = index;
    }
  });

.success{
  background-color:green;
  }

.warning{
   background-color:yellow;
  }

.danger{
  background-color:red;
  }
.bg-primary{
  color:white;
   background-color:blue;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
  
  <table>
    {{selectedRow}}
     <tr ng-repeat="item in items" ng-class="{'success': item.score<= 4,'warning' :5<= item.score,'danger' : 8<=item.score,'bg-primary':rowIndex == $index }" ng-click="selectRow($index)" >
             <td>{{item.name}}</td>
             <td>{{item.score}}</td>
      </tr>
</table>
            
</div>

edited Mar 23, 2016 at 19:27

answered Mar 23, 2016 at 18:09

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

7 Comments

Gabriel Tortomano Over a year ago

Yeah...that's basically what i did...but the success,warning and danger classes are already defined by bootstrap, and the background-color is defined in all of them, so when i add a new class, the new one doesn't override the old one, so basically what I end up with is a table row with the same color but white text; I'm posting a picture right now so you can see what's happending!

Gabriel Tortomano Over a year ago

I added two pictures, the first one is what I've done so far, the second is what I want to acomplish!

Hadi Over a year ago

why don't use custom class for this?

Gabriel Tortomano Over a year ago

Yeah...I suppose i could... but I don't see the point... It seems to me that is gonna happen the same thing again...doesn't it?

Gabriel Tortomano Over a year ago

I added my custom classes just for the sake of it, and it's all the same, the "background-color" property doesn't change!, it's stuck with the red,yellow or green, I really need help!

|

Collectives™ on Stack Overflow

selected table row angular.js

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related