CODEWITHSUNDEEP
javascripthtmlcssangularjs
Gabriel Tortomano
Gabriel Tortomano

Reputation: 115

selected table row angular.js

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!

Upvotes: 2

Views: 3671

Answers (1)

Hadi
Hadi

Reputation: 17299

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>

Upvotes: 2

Related Questions