通过ng-click更改单元格颜色

Question

当我点击我的按钮时，我的单元格会改变颜色，但是当我第二次点击时，我的颜色单元格没有保留。

我希望当我再次点击另一个按钮时，我的第一个单元格保持颜色

首先点击：

第二次点击：

HTML：

<table class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
    <tr class="warning">
        <th>Key</th>
        <th>Valeur version {{application.version}}</th>
        <th></th>
        <th>Valeur version {{applicationcible.version}}</th>
    </tr>
    </thead>

    <tbody ng-repeat="group in groups">
    <tr>
        <td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                <strong>{{group.name}}</strong>
            </a>
        </td>
    </tr>
    <tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
        <td rowspan="2">
                {{ member.name }}
        </td>
        <td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
        <td class="cube" >
            <div  ng-if="group.id != 1">
                <button type="button"  ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
             </div>
        </td>
        <td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
    </tr>
    <tr ng-repeat-end ng-hide="hideGroup" >
        <td class="cube" >
            <div ng-if="group.id != 2">
                <button type="button"  ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
             </div>
        </td>
    </tr>
    </tbody>
</table>

CSS：

.selected { background-color: #ffff05; }

JS：

scope.moveLeft = function (index, group) {
                move(scope.properties, group.id, index, 'left');
            };

            scope.moveRight = function (index, group) {
                move(scope.propertiescible, group.id, index, 'right');
            };

            var move = function (properties, groupId, origin, destination) {
                unregister();
                var value;
                if (destination === 'right') {
                    scope.selectedRowRight = origin;
                } else {
                    scope.selectedRowLeft = origin;
                }
...

Answer 1

您可能需要创建一个数组以保持所选单元格的背景颜色。 此外，您还需要更改ng-click功能以检查数组，并实现以下逻辑“如果所选行的已点击行的记录将其bg颜色更改为黄色”

Answer 2

你需要做这样的事情

<td ng-repeat="group in groups" ng-class="{'selected': check == group.title}" ng-click="select(group)">{{group.title}}</li>

在css中确保您已选择此选定的类

.selected {
    background: 'red';
}

控制器中的

$scope.check = '';

$scope.select = function (group) {
    $scope.check = group.title
};

请参阅此plunker http://plnkr.co/edit/pLbLMWsJ7A6Zr1Z9uAmz?p=preview