Alter the background shade of an item as it is added or removed from a multi-select list and transferred to another list

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 = [];
};

Answer №2

After encountering a problem with ng-class when using it in conjunction with ng-options, I found that switching to a select element with options inside was a more effective solution.

To adjust for this issue, I revised my code to utilize a select element with options nested within it instead of trying to use both ng-class and ng-options simultaneously.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 8: Implementing Form Validation with a Boolean Flag

Within my HTML code, I have a function (change)="limitUser($event)". In Typescript, I utilize a for loop to iterate through each element and determine if the value is less than 10. If it exceeds 10, the inValid = true condition is set. All form fields in m ...

The Angular material autocomplete feature fails to close automatically when the document loses focus

Normally, an input field will blur when you click on the 'body' of the document. But when using the autocomplete directive on desktop, the menu never closes on mobile unless you select an item or refresh the page. Initially, I thought this issue ...

Generate a series of buttons with generic identifiers that can be easily targeted using getElementById. The IDs will be dynamically assigned

I am looking to dynamically generate unique IDs for a list of buttons, allowing me to easily target specific buttons using getElementById. Here is an example code snippet where each button has the same ID: @foreach (var cat in Model) { <div clas ...

Angular 4 - Issue with Top Navigation Bar not remaining fixed at the top of the page

I'm having trouble finding a solution to keep the top navigation bar fixed at the top of the screen without allowing it to scroll when the page becomes too long. I want to prevent the top nav bar from scrolling and maintain its position at the top of ...

What causes my CSS styles to vanish upon refreshing the page in Next.js?

After setting up a CSS folder within my app directory and importing the files into components for use, I noticed that the styles are applied initially. However, upon refreshing the page, they all disappear. I attempted to resolve this issue by going back ...

Ensure that all panels are set to the same width as the widest panel

Is there a way to make all the panels in my jQuery tabs have the same width as the widest panel? I know that heightStyle:"auto" works for adjusting the height, but is there a similar option like widthStyle:"auto"? I want to show you the current look compa ...

The div width set to 100% is not functioning properly upon the initial form loading in IE11, however, it is working

[![enter image description here][1]][1]Can anyone assist me in resolving this issue? When my Div with the id "Coverage" loads initially, its width is set to the content width. However, after a refresh, it expands to 100% width. This problem does not occu ...

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

What strategies can I use to prevent any spaces between cards when I unfold them?

Hello, I am looking to create a basic webpage. In this link, there are 4 cards that can be opened. However, when I open card B, a gap appears between card A and card C - and I'm not sure why this is happening. Here is a link to the HTML code I have us ...

AngularJS route not functioning as expected

I am currently utilizing angular in combination with node. I am implementing routes to redirect the page. On my html page, I have defined 2 links as follows: <!DOCTYPE html> <html > <head> <title>My Angular App!</title> ...

Basic AngularJS program: Displaying a issue in Gruntfile.js

$ grunt connect:development:keepalive ERROR: Running "connect:development:keepalive" (connect) task Warning: undefined is not a function Use --force to continue. Aborted due to warnings. I am currently studying AngularJS from the book Profes ...

What causes Firefox (Mobile) to zoom out of my webpage?

After launching my webpage on Google Chrome mobile (android), everything loads perfectly. However, when trying to access the site using Firefox mobile (android), most pages load in a zoomed-out view. The issue is resolved by opening the drop-down menu, but ...

Utilize Angular filter to enclose variable content with double quotation marks

I am working on HTML/Angular code that includes a <blockquote> element with {{testimonial.text}} inside it. My goal is to create a custom filter named "blockquote" that would surround {{testimonial.text}} with quotation marks. For example, the desi ...

Bootstrap 5 - Achieve automatic column width within a row

In my Bootstrap 5 setup, I have a variety of pages that have different column layouts - sometimes 2 columns, sometimes 3. The template system I'm using dynamically adjusts the layout to accommodate the need for a third column when necessary. <div ...

Unable to modify the model of the directive

I'm facing an issue where additional elements added to my array within a controller of a directive are not being displayed in the view. What's even more frustrating is that when I print my model, it doesn't reflect the new elements that have ...

AngularJS working with a Django CORS API

I have successfully implemented CORS in Django using the "django-cors" package: https://github.com/ottoyiu/django-cors-headers Upon following the installation instructions, I have configured the settings as follows: CORS_ORIGIN_ALLOW_ALL = False CORS_ ...

Syntax error: Your code encountered an unexpected closing curly brace

Here is the code snippet I am working with: <?php session_start();?> <!DOCTYPE html> <html> <head> <title>Narcis Bet</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css"&g ...

How to access a variable in an Angular Factory's callback function from outside the factory

Here's a look at the structure of My Factory: .factory('MyFactory', function(){ return: { someFunction: functon(firstParam, secondParam, resultObject) { $http.get(url).success(resultObject); } ...

Accessing and manipulating web elements using either XPath or CSS selectors

Having trouble selecting a specific piece of information using xpath or css selector. Error messages keep appearing. Can someone help identify the issue? This snippet is from my code: output = driver.find_element_by_xpath("//td[@class_= 'sku']" ...

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Currently working on a small app, but encountering an error with routerLink in the console. I am new to angular and seeking help. ✘ [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'. Here is ...