Question

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

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

如果我从右向左移动x个对象，则我希望这些对象的背景色为红色（显示已移除）。如果对象从左向右移动，则将其添加为绿色。静止不动的物体应保持白色背景。

我该怎么办？

.btn {
    border-radius: 0.15rem;
    background-color: #4caf50;
    color: #fff;
    cursor: pointer;
    user-select: none;
    text-align: center;
    white-space: nowrap;
    font-size: 1rem;
    border: 1px solid #4caf50;
    margin: 0;
}
#map-controls-container {
  left: 0;
}
#map-controls-container2 {
  right: 0;
}
#map-controls-container,
#map-controls-container2 {
    position: absolute;
    top: 0;
    background-color: #0000ff;
    display: inline-flex;
    flex-direction: column;
    min-height: 172px;
    height: 100%;

    .map-controls-style {
        min-height: 86px;
        max-height: 100%;
        display: grid;
        background-color: #1b5e20;
        grid-template-rows: repeat(auto-fit, 40px);
        align-content: space-around;
        grid-gap: 2px;
        padding: 2px;
        grid-auto-flow: column;
        grid-auto-columns: 40px;

        button {
            background-size: 100% 100%;
            background-origin: content-box;
            background-position: center center;
            width: 40px;
            height: 40px;
            padding: 0;
        }
    }
}

<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>

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">

Answer 2

Ng级对我来说效果最好，但是我遇到了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>

当项目从一个多选列表中新添加/删除时，更改项目的背景颜色

2 个答案: