html - 将元素从一个多选列表新添加/删除到另一个时更改元素的背景颜色

Question

我有两个多选列表，其中的对象可以在两者之间移动。当元素从两个多选列表中移动时，我想直观地显示元素的移动/流动。

这两个列表是并排的。 (右边一个，左边一个)

如果我从右向左移动 x 个对象，我希望这些对象的背景颜色为红色(表示移除)。如果对象从左向右移动，它们将被添加，所以应该是绿色的。那些不动的应该保持白色背景。

我该怎么做？

<div>
    <label>Current Keywords:</label>
    <div>
        <select multiple size="8" ng-model="selectedCurr" ng-options="keyword in selectedKeywords"></select>
    </div>
</div>
<div>
    <input id="moveRight" type="button" value=">" ng-click="moveItem(selectedCurr, selectedKeywords, availableKeywords)"/>
    <input id="moveLeft" type="button" value="<" ng-click="moveItem(selectedAvailable, availableKeywords, selectedKeywords)"/>
</div>
<div>
    <label>Available Keywords:</label>
    <div>
        <select multiple size="8" ng-model="selectedAvailable" ng-options="keyword in availableKeywords"></select>
    </div>
</div>

$scope.moveItem = function(items, from, to) {
    angular.forEach(items, function(item) {
        var idx = from.indexOf(item);
        from.splice(idx, 1);
        to.push(item);
    });
    $scope.selectedCurrent = [];
    $scope.selectedAvailable = [];
};

Answer 1

您可以根据需要使用 ngStyle 或 ngClass

https://docs.angularjs.org/api/ng/directive/ngStyle

https://docs.angularjs.org/api/ng/directive/ngClass

在我的例子中，我必须根据属性设置不同的背景，所以我让它在后端生成颜色并且效果很好

<tr ng-style="{'background-color': x.color }" ng-repeat="x in reparaciones | filter: filter4">