Is there a way to visually represent the movement of items between two multi-select lists? I have one list on the right and one on the left, and when objects move from right to left, I want them to have a red background (indicating removal) and if they move from left to right, they should have a green background. Objects that do not move should remain with a white background.
How can this be achieved?
<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 = [];
};