How to add class to specific table tr with angular ng-repeat

Question

In my HTML I have a table:

<table>
  <tr ng-class="vm.status" ng-repeat="item in vm.itemsList">
    <td>{{ item.name }}</td>
    <td>
      {{ item.description }} - <span ng-click="vm.disableRow()">Disable</span>
    </td>
  </tr>
</table>

What I'm trying to accomplish is that when I click on Disable, I want to apply the class "disabled" to that specific tr only.

My current code applies that class to the entire table. I have other options such as remove that successfully removes the tr by using splice and $index.

I wondered if I need to implement $index to add class too but I can't think of how to do it.

In my controller:

vm.disableRow = function() {
  vm.status = 'disabled';
}

If it matters, I need to only click once to apply that 'disabled' class. Once its disabled, I cannot change it so no need for a toggle on or off option.

I believe this: http://stackoverflow.com/questions/23618960/add-a-class-selectively-to-an-ng-repeat-angularjs?rq=1 to be a possible solution perhaps a duplicate but I'm not sure I'm understanding. — odran037, Feb 29 '16 at 01:50

score 2 · Answer 1 · answered Feb 29 '16 at 01:55

2

I would save the status in each item instead:

<tr ng-class="item.status" ng-repeat="item in vm.itemsList">
      <td>{{ item.name }}</td>
      <td>
  {{ item.description }} -<span ng-click="vm.disableRow(item)">Disable</span>
</tr>

And in your controller:

vm.disableRow = function(item) {
    item.status = 'disabled';
}

answered Feb 29 '16 at 01:55

ippi

9,857
2
39
50

Upvoted because I actually implemented this idea along with the first suggestion. I couldn't be as detail as the actual app I'm building for confidentiality reasons. – odran037 Feb 29 '16 at 02:11
This is a more "correct" way of doing it. I also like to use direct assignment on `ng-click` if it's a short operation. `ng-click="item.status = 'disabled'"` – Icycool Feb 29 '16 at 03:14

score 1 · Answer 2 · answered Feb 29 '16 at 01:52

1

I think you should use an array to save status class.

In your controller:

vm.status = [];
vm.disableRow = function(index) {
  vm.status[index] = 'disabled';
}

And at the view:

<table>
  <tr ng-class="vm.status[$index]" ng-repeat="item in vm.itemsList">
    <td>{{ item.name }}</td>
    <td>
      {{ item.description }} - <span ng-click="vm.disableRow($index)">Disable</span>
    </td>
  </tr>
</table>

answered Feb 29 '16 at 01:52

dieuhd

1,316
1
9
22

will fall apart if using any filtering. `$index` is not the same as original array index in a filtered repeat – charlietfl Feb 29 '16 at 01:57
@charlietfl good point. I will certainly keep that in mind. But in this case I don't need filtering. The project is rather simple. – odran037 Feb 29 '16 at 02:09

Sunil Lama · Answer 3 · 2016-02-29T03:25:31.727

Its actually pretty simple. You don't need to code in the controller to achieve that. Since, you need to disable that particular row and not toggle it.Follow the following.

<table>
  <tr ng-repeat="item in vm.itemsList" ng-click="item.disabled = true" 
            ng-class="{ disabled: item.disabled }">
    <td>{{ item.name }}</td>
    <td>
      {{ item.description }} - <span>Click the row to Disable</span>
    </td>
  </tr>
</table>

Here is the working PLUNKER:http://plnkr.co/edit/8URPrZlM9PPruhaX2w3v?p=preview
I have added the red css color just to show the change when disabled.

score 0 · Answer 4 · answered Feb 29 '16 at 05:18

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

app.controller("ctrl" , function($scope){
  
  $scope.items = [
   {"name":"Ali","description":"Java"},
      {"name":"Reza","description":"C++"},
      {"name":"Amir","description":"C#"}
  ];
    
    
  });

.odd{
  color:red;
  }

.even{
    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">
<table>
  <tr ng-repeat="item in items" ng-class-odd="'odd'" ng-class-even="'even'">
    <td>{{ item.name }}</td>
    <td>
      {{ item.description }} - <span ng-click="vm.disableRow()">Disable</span>
    </td>
  </tr>
</table>
  </div>

How to add class to specific table tr with angular ng-repeat

4 Answers4