Angular JS allows for the creation of a multiple select feature with an additional value linked to each selection

Looking for advice on how to add an additional integer value along with selected values in a multiple select field for my project. Can anyone recommend the best approach for achieving this? Here is a snippet of what my multiple select dropdown currently looks like. Thank you in advance.

<div class=" multiselectdd "><multiselect ng-model="vm.inventory.SiteId" options="site.value as site.label for site in vm.sites"  data-header-key="header"data-divider-key="divider" scroll-after-rows="5"filter-after-rows="0">
</div>
javascriptangularjs

Answer №1

I'm not fully understanding it, but if you need to select more than one item in your dropdown list, you can do so with the following steps:

On the Javascript side

$scope.SelectedChanged = function (yourModel) {
  if (yourModel.length > 1) {
    $scope.newModel = yourModel[1];
  }
};

On the HTML side

<select name="yourElementName" multiple ng-model="yourModel" ng-change="SelectedChanged(yourModel)">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Tree</option>
  <option value="3">Four</option>
</select>

After setting up, test your model by calling it:

<span>{{yourModel}} - Second Value: {{newModel}} </span>

For example, if you select "One and Two," you will see the output as:

Output

["0","1"] - Second Value: 1

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

What is the best way to retrieve text from the p tag and input it into the text field?

Looking to resolve a situation where two identical IDs exist and need to implement some JQuery. The objective is for the input value to automatically update itself based on changes in the text of the p tag. $(document).ready(function(){ ...

javascripthtmljqueryjsonjquery-plugins

Is it possible to utilize jQuery to add 'a' attributes in HTML5?

Here is a snippet of code that works with Chrome and Firefox browsers: HTML: <a id="savefile""> Save transferred file </a> Javascript: // event is returned by a readAsDataURL() var save = document.getElementById('savefile'); s ...

javascriptjqueryhtml

Is there a compatibility issue between ui.bootstrap tooltip and ng-model in an input element?

My goal is to incorporate an input element with a tooltip and connect a function to the enter keypress event. Individually, each of these features works, but when combined, they seem to be causing an issue. The following is the code snippet: <input t ...

angularjsangular-uiangular-ui-bootstrap

How to customize a bootstrap checkbox in ReactJs and set it to an indeterminate state

I have created a custom checkbox that functions as a "Three-State-Checkbox", utilizing the indeterminate state as both a visual and real value. The checkbox works correctly with the standard checkbox, but when I use the Bootstrap custom checkbox, the React ...

javascriptreactjscheckboxbootstrap-4

Displaying all divs when the checkboxes are unchecked

My code displays a product list with various details stored in different divs based on data attributes like brand, store, and more. A friend helped me develop a filter using checkboxes for record selection. However, I need to make a small modification to i ...

javascriptjqueryhtmlcss

Create Joi Schema based on TypeScript types/interfaces

Searching for a way to convert Typescript types or interfaces into joi schema objects led me to various solutions that did the opposite, such as generating Typescript types/interfaces from joi schemas. I came across options like ts-interface-builder and ts ...

javascriptnode.jstypescriptjoi

Encountering problems during the installation of Ionic - Error code 'EPROTO'

After attempting to install Ionic on my system, I encountered the following error message: npm ERR! code EPROTO npm ERR! errno EPROTO npm ERR! request to https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz failed, reason: write EPROTO 0:er ...

javascriptnode.jstypescriptnpm

What is causing my program to invoke axios twice?

Struggling with setting profile state using redux and encountering the issue of axios being called twice for some reason. Here is my database profile.js: const mongoose = require("mongoose"); const Schema = mongoose.Schema; // Create Schema const Profil ...

javascriptreactjsaxios

Struggling to understand how to personalize a D3 generated graph

Currently, I am utilizing react-d3 instead of the Plotly react wrapper due to some bugs in the latter. My issue now lies in understanding the d3 API as I am unable to fully grasp it. I have successfully created a scatter plot similar to the one shown on ...

javascriptd3.jsreactjsreact-d3

Issue with setting multiple checkboxes in AG Grid

I have a situation where I am trying to select multiple checkboxes on different rows in my application. Each time I click on one checkbox, it gets selected just fine. However, when I click on another checkbox in a different row, the previously selected che ...

javascriptangularjsag-grid

Issues arising with carousel pager in Cycle2 slideshow not functional

Our unique pager is designed with the "Advanced Custom Template" on a dynamic carousel slideshow. Everything seems to be running smoothly until I interact with the pager - then things start acting strangely. The active slide doesn't change position a ...

javascriptjqueryhtmlslideshowjquery-cycle2

What are the steps to implement zone.js in your Angular application?

I am looking to utilize zone.js in my Angular project beyond just the runOutsideAngularZone function. My attempt to include it looked like this: import { zone } from 'zone.js'; Unfortunately, I encountered this error: error TS2306: File &apos ...

javascriptangularzone

Using only native JavaScript Vanilla, Rails does not execute create.js via Ajax

Concerning Rails 4 and Vanilla JavaScript, I encountered an issue with my code for creating a Shop record via Ajax. The record is successfully created, but the create.js file is not being triggered as expected. A strange occurrence happens in Chrome where ...

javascriptruby-on-railsajax

Expo's ReactNative camera feature fails to flip the camera view

Following the guidance provided in Expo Docs on how to use a camera, I have noticed that when I press the flip button, the state of the camera type changes from 0 to 1 and vice versa, but the camera always remains on the back side. This is my implementati ...

javascriptreact-nativeexporeact-native-camera

Guide to importing external CSS styles into Angular 2 using the require method

I'm facing an issue with loading an external css file in different environment files. My setup includes two environments: development and production. Loading the css file locally works fine in development mode, but not in production mode. environment ...

javascriptcssangularwebpackstyles

Tips for assigning a single color to each bar in an Angular chart using Chart.js

Here is an example of my HTML code: <canvas id="bar" class="chart chart-bar" chart-data="expenseData" chart-labels="labels" chart-series="series" chart-options="chartOptions" colours= "colours"> </canvas> This is a snippet of ...

angularjschart.jsangular-chartist.js

What is the best way to create a Snap.svg map using AngularJS?

I am in the process of creating a web interface for an online board game. My goal is to load a Snap.svg map using Snap.load asynchronously. Once the map is loaded, I intend to attach a watch to a scope property and apply colors to the map based on that pr ...

javascriptangularjssvgcoffeescriptsnap.svg

Storing the radio button's selected value in local storage using Vue JS

I have a pair of radio buttons that are linked together to accept a boolean value, either true or false. I am trying to implement a functionality where the selected value is stored in local storage. For example, if true is chosen, then true will be saved i ...

javascriptvue.jsvuejs2local-storage

Transferring an Applescript list to ExtendScript in Javascript as an array for use in InDesign

Situation Background I have a large number of Applescripts (AS) that designers rely on in InDesign to streamline production workflows. These AS scripts handle a lot of OS interactions that JavaScript cannot replicate, so transitioning away from AS is not ...

javascriptjsonapplescriptadobe-indesignextendscript

Substitute link with asynchronous JavaScript and XML

I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...

javascriptjqueryhtmlajaxanchor