Изменить цвет фона элемента при его добавлении / удалении из одного списка с несколькими вариантами выбора в другой - PullRequest
Новая
       17

Изменить цвет фона элемента при его добавлении / удалении из одного списка с несколькими вариантами выбора в другой

0 голосов
/ 30 мая 2019

У меня есть два списка с множественным выбором, в которых есть объекты, которые можно перемещать между ними.Я хотел бы наглядно показать движение / поток элементов, когда они перемещаются из двух списков с несколькими вариантами выбора.

Два списка расположены рядом.(Один справа и один слева)

Если я переместу 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 = [];
};

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

NG-класс работал лучше всего для меня, но я столкнулся с проблемой из Как использовать NG-класс в select с помощью ng-options

Чтобы обойти это, я не мог использовать ng-class и ng-options в select, поэтому я изменил его на 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>
0 голосов
/ 31 мая 2019

Вы можете использовать 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">
...