Сделать одну кнопку активным в группе кнопок, созданных ng-repeat

Question

Я работаю над директивой, которая отображает таблицу с использованием директив ng-repeat. Каждая ячейка в таблице может содержать кнопку в зависимости от данных. Вот соответствующий фрагмент шаблона.

<tbody> 
    <tr ng-repeat="row in data.rows"> 
     <td>{{ row.rowName }}</td> 
     <td ng-repeat="cell in row.cells"> 
      <button id="button-{{ row.id }}-{{ cell.id }}" 
        class="btn btn-primary" 
        ng-show="cell.isActive" 
        ng-click="onClick(row.id, cell.id, $event)">Select</button> 
     </td> 
    </tr> 
</tbody> 

В контроллере у меня

$scope.onClick = function (rowId, cellId, event) { 
    $scope.selectedRowId = rowId; 
    $scope.selectedCellId = cellId; 
    $scope.selectedButtonId = event.target.id; 
}; 

Цель состоит в том, чтобы сделать его таким образом, что, когда пользователь нажимает кнопку в таблице, эта кнопка становится активной. Когда пользователь нажимает на другую кнопку, он становится активным, делая ранее активную кнопку неактивной. Эта функция будет использоваться для управления тем, что отображается в другом разделе страницы.

Я пробовал несколько вещей, но я думаю, что наиболее угловатым способом делать вещи является использование ng-class в кнопках для применения активных и неактивных классов на основе того, какая кнопка была нажата. С этой целью я назначаю им все уникальные идентификаторы и отслеживание, на которые нажата кнопка на основе события.

Проблема в том, что я не могу понять, как сделать работу ng-class. Есть ли какой-то способ получить идентификатор текущей кнопки, в которой я нахожусь, или я вообще ошибаюсь в этом.

Спасибо.

Answer 1

В вашей кнопки код установки атрибута HTML нг-класс:

ng-class="active : selectedRowId = row.id & selectedCellId = cell.id"