выбранная строка таблицы angular.js

У меня есть таблица с такой директивой ng-class:

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

По сути, он окрашивает строки в зависимости от значения vulnScore; это прекрасно работает!, но мне нужно иметь возможность выбирать строки, я сделал это, выполнив:

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

и это работает... но единственное, что он делает, это меняет текст на белый, потому что на него уже действует класс цвета... Мне нужно иметь возможность удалить действующий класс (успех, предупреждение или опасность), когда выбирается и возвращает его, когда выбран другой, мне было бы легко, если бы был только один класс... но я не знаю, как узнать, какой из них у меня был в первую очередь, и как вернуть его обратно!

Вот что у меня есть: (выделена первая строка):

Что я сделал

и что я должен сделать, это что-то вроде:

Чего я на самом деле хочу

если кто-то может помочь, я был бы очень признателен!


javascript html css angularjs
person Gabriel Tortomano    schedule 23.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

попробуй это.

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>

person Hadi J    schedule 23.03.2016
comment
Да... в основном это то, что я сделал... но классы успеха, предупреждения и опасности уже определены начальной загрузкой, и цвет фона определен во всех из них, поэтому, когда я добавляю новый класс, новый не не переопределять старый, поэтому в основном я получаю строку таблицы с тем же цветом, но белым текстом; Выкладываю фото прямо сейчас, чтобы вы могли видеть, что происходит! - person Gabriel Tortomano; 23.03.2016
comment
Я добавил две фотографии, первая - то, что я сделал до сих пор, вторая - то, что я хочу сделать! - person Gabriel Tortomano; 23.03.2016
comment
почему бы не использовать для этого собственный класс? - person Hadi J; 23.03.2016
comment
Да... Наверное, я мог бы... но я не вижу смысла... Мне кажется, что снова произойдет то же самое... не так ли? - person Gabriel Tortomano; 24.03.2016
comment
Я добавил свои пользовательские классы только ради этого, и все равно, свойство background-color не меняется!, оно застряло с красным, желтым или зеленым, мне действительно нужна помощь! - person Gabriel Tortomano; 24.03.2016
comment
я обновляю свой ответ и работаю так, как вы хотите. пожалуйста, проверьте его. - person Hadi J; 24.03.2016
comment
Итак... я запустил его, и он выглядел великолепно; я скопировал фрагмент в свой реальный код, и это не сработало ... Мне потребовалось некоторое время, чтобы понять, что используемые мной загрузочные классы не были полностью предназначены для использования в таблице; Итак... как вы предложили, я создал пользовательские правила, и они отлично работают! Большое спасибо, чувак! ты правильно понял! - person Gabriel Tortomano; 24.03.2016