Encountering issues with retrieving the id from the chosen values in a multi-select list box using AngularJS

After successfully moving items from one list box to another, the next step is to save the list of all items in the second list box along with their respective ids into the database. However, there seems to be an issue with retrieving the ids from the second list box. What would be the most effective way to extract all the items from the list box and transmit them to the controller? Here is the code:

Html:

<div class="control-group">
    <div class="selector">
        <select multiple="multiple" id="SelectLeft" ng-model="TaxId" ng-options="tax.TaxId as tax.TaxName for tax in Taxes"></select>
    </div>
    <input id="MoveRight" type="button" value=" >> " ng-click="MoveTaxes()" />
    <input id="MoveLeft" type="button" value=" << " ng-click="MoveTaxes()" />

    <div class="selector">
        <select id="SelectRight" ng-model="SelectRight" multiple="multiple">
        </select>
    </div>
</div>

JS code is here:

$("#MoveRight,#MoveLeft").click(function (event) {
    var id = $(event.target).attr("id");

    var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
    var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";
    
    var selectedItems = $(selectFrom + " :selected").toArray();
    $(moveTo).append(selectedItems);
    selectedItems.remove;
});

Answer №1

Initially, I strongly advise against the use of jquery within angular. On top of that, your mindset should not be stuck in the world of jquery when mentioning "sending it to the controller."

Now, getting back to your question -

Incorporate ng-options within the second div.

<div class="control-group">
    <div class="selector">
        <select multiple="multiple" id="SelectLeft" ng-model="TaxId" ng-options="tax.TaxId as tax.TaxName for tax in Taxes"></select>
    </div>
    <input id="MoveRight" type="submit" value=" >> " ng-click="MoveRight()" />
    <input id="MoveLeft" type="button" value=" << " ng-click="MoveLeft()" />
    <div class="selector">
            <select id="SelectRight" ng-model="SelectRight" ng-options="tax.TaxId as tax.TaxName for tax in TaxesSecond">
            </select>
</div>

Next step is to add the element into the second array TaxesSecond every time you move from left to right and simultaneously remove that element from the first array by using splice, and vice versa.

 $scope.MoveRight = function(){
         $scope.TaxesSecond.push($scope.selectedLeft);
         $scope.Taxes.splice($scope.Taxes.indexOf($scope.selectedLeft),1);
    }

You should be able to implement MoveLeft independently.

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

Neglecting the error message for type assignment in the Typescript compiler

Presented here is a scenario I am facing: const customer = new Customer(); let customerViewModel = new CustomerLayoutViewModel(); customerViewModel = customer; Despite both Customer and CustomerLayoutViewModel being identical at the moment, there is no ...

React - Stopping the Submit Action

Recently, I have been delving into React development. In my exploration, I have incorporated the Reactstrap framework into my project. However, I have encountered an issue where the HTML form submits when a button is clicked. Is there a way to prevent this ...

Tips for presenting JSON date in JavaScript using Google Chart

I am in urgent need of assistance with this issue. I am trying to display the date from PHP JSON data retrieved from my database in a Google Chart using JavaScript. Below is the PHP code snippet: $data_points = array(); while($row = mysqli_fetch_array($r ...

Accessing this.href from the ASP.NET code behind using Javascript

I'm trying to pass this.href from my asp.net code behind to JavaScript. When I run the code, the value appears as 'undefined' in the alert message. Can anyone help me with this issue? Page.ClientScript.RegisterStartupScript(this.GetType(), ...

Issue with socket malfunctioning when integrated with express

I’m encountering an issue with the socket in my program. While I can easily broadcast from any part of the program using "io" connection, I face limitations when trying to use "socket" for broadcasting unless it is within the same connection as "io." I a ...

What are the steps to update your profile picture using Angular?

In my Angular 6 application, I am implementing an image upload feature with the following code: Html: <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/> <input type='file' (change)="onSelec ...

Execute a function when the selected option changes

Now I have implemented a code that dynamically changes the foreign key based on user input and retrieves data accordingly. Here is how it all comes together: Starting with the HTML page: <div class="large-6 columns"> {% csrf_token %} <in ...

What is the best way to set the date defaultValue to be empty?

I've developed a basic radio button to display an additional input field when the user chooses yes. I also created a function that will clear the fields if the user selects no. schema.ts: const formSchemaData = z.object({ doesHaveDryRun: z.enum( ...

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...

String representation of a failed test

While working on some coding exercises on codewars, I came across a simple one that requires creating a function called shortcut to eliminate all the lowercase vowels in a given string. Here are some examples: shortcut("codewars") // --> cdwrs shortcut ...

What are the steps to modify the sign in page on keystone.js?

I recently started using keystone.js and I'm having trouble locating the sign in page within the files. I've searched through all of the keystone.js files but can't seem to find where it's written. Can someone please guide me on how to ...

`When utilizing $routeParams, the CSS fails to load`

Whenever I use parameters in ngRoute and go directly to the URL (without clicking a link on the site), the CSS fails to load. All my routes are functioning properly except for /chef/:id. I utilized yeoman's angular generator, and I am running everythi ...

Update the link by simply clicking on a div tag

I am currently working on a PHP page and my goal is to add the extension ?id=variable_value to its URL when I click on a specific div. However, whenever I try to do this, it shows me an error message stating that the URL with the extension is undefined. B ...

Why is my ForEach loop only capturing the final item in the array?

I am encountering an issue with a function that I want to perform for every item in my array. It seems to only trigger for the last item in the array, and I am unsure of how to address this problem: $scope.PlayMovie =function(){ angular.forEach($scope ...

AngularJS script to dynamically update a table upon selecting an option from the dropdown menu

Just starting out with Angularjs and facing a challenge. I have a table with a "Update" button on the UI and a drop-down option in the 3rd column. The requirement is, upon selecting an option from the drop-down and clicking the "Update" button, the values ...

Executing JavaScript code upon successful form submission: An overview

I need help with my Asp.Net MVC web application. I am trying to implement a feature where some code runs on the successful response of an API method called upon form submission. Here is the current code snippet: @using (Html.BeginForm("APIMethod", "Confi ...

Encountering an error of "Cannot set headers after they are sent" when attempting to manage a user session during a test using the Chai request agent

We're currently facing a challenge with an error message stating Uncaught Error: Can't set headers after they are sent. when attempting to link a user sign-in to a test using chai-http. The test signs in a user already existing in the database v ...

Having issues with ReactJS - function not functioning properly when invoked within componentDidMount() and componentDidUpdate() lifecycle methods

I have encountered an issue that has left me puzzled, and I'm hoping someone can provide some guidance on how to solve it. The task at hand involves implementing a function that adds .active classes to li elements within a navigation bar if they cont ...

Troubleshooting problem with fetching data from Angular API

Looking to use Angular to extract a specific value from the following API: Current code snippet being utilized: app.controller("api", function($scope, $http) { $scope.home = "This is the homepage"; $scope.getRequest = function() { console. ...

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...