0

I have two multi-select lists that have objects that can move between the two. I would like to show visually the movement/flow of items when they are moving from two multi-select lists.

The two lists are side by side. (One on the right and one on left)

If I move x number of objects from the right to the left, I want the background color to be red (showing removal) for those objects. If objects move from left to right, they are added so should be green. The ones that do not move should stay white background.

How can I go about this?

<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 = [];
};
Ren Sasaki
  • 23
  • 3
  • Take a look at https://docs.angularjs.org/api/ng/directive/ngRepeat#animations the very last example is for `ng-repeat` using an unordered list and shrinking the item size to 0. You just need to replace the `max-height` style with `background`. Here is a quick edit https://plnkr.co/edit/TNA16OyE2joSdbu2zeyf?p=preview – kendavidson May 30 '19 at 17:35
  • Is there a way for them to not disappear?? I do not care for the animation, I just need the background colors to change... – Ren Sasaki May 30 '19 at 21:21
  • Don't remover them from the array backing the ngRepeat and use a isDeleted field to set ngClass instead? No need to animate just use regular css – kendavidson May 31 '19 at 02:41

2 Answers2

0

You can use ngStyle or ngClass, depending on your needs

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

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

In my case I had to set a different background depending on an attribute, so I made it generate the color in the back-end and it worked pretty well

<tr ng-style="{'background-color': x.color }" ng-repeat="x in reparaciones | filter: filter4">
dawsnap
  • 994
  • 9
  • 21
0

Ng-class worked best for me but I was running into the issue from How to use ng-class in select with ng-options

In order to work around this, I could not use ng-class and ng-options in a select so I change it to be a select with an option inside it.

.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>
Ren Sasaki
  • 23
  • 3