将新 added/removed 项目的背景颜色从一个多 select 列表更改为另一个

Question

我有两个多 select 列表，其中包含可以在两者之间移动的对象。当项目从两个多 select 列表移动时，我想直观地显示项目的 movement/flow。

两个列表是并排的。（右边一个，左边一个）

如果我从右向左移动 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

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

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

Answer 2

Ng-class 最适合我，但我运行陷入了 How to use ng-class in select with ng-options

的问题

为了解决这个问题，我无法在 select 中使用 ng-class 和 ng-options，所以我将其更改为 select，其中包含一个选项它。

.green{
        background: 'green;
}

<select size="8" multiple ng-model="selectedCurr">
      <option ng-repeat="keyword in selectedKeywords" ng-value="keyword" ng-class="{green: keyword.color.selected}">{{keyword.name}}</option>
</select>

将新 added/removed 项目的背景颜色从一个多 select 列表更改为另一个

Change the background color of item when it is newly added/removed from one multi-select list to another

html

css

multi-select

angularjs