How to rearrange the chosen options in an AngularJS ui-select multiple menu

Is there a way to automatically rearrange the order of selected items in AngularJS ui-select multiple?

Check out this code snippet, with more examples available on ui-select github

<ui-select multiple ng-model="ctrl.multipleDemo.colors" theme="bootstrap" ng-disabled="ctrl.disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
  {{color}}
</ui-select-choices>

Here is a snapshot of its behavior :

https://i.sstatic.net/SoHSy.png

What I want is for the selected items to be reordered: even if I selected Yellow, Green, and then Blue, I would like them to display as Blue, Green, Yellow.

I have come across an attribute called sortable="true" but it doesn't seem to achieve the desired result.

javascriptangularjsangular-ui-select

Answer №1

Make sure to include 

on-select="$select.selected.sort()"
:

<ui-select multiple 
         ng-model="ctrl.multipleDemo.colors" 
         on-select="$select.selected.sort()"
         theme="bootstrap" 
         ng-disabled="ctrl.disabled" 
         close-on-select="false" 
         style="width: 300px;" 
         title="Choose a color">
  <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
  <ui-select-choices repeat="color in ctrl.availableColors | filter:$select.search">
    {{color}}
  </ui-select-choices>
</ui-select>

Check out the updated plunker here: http://plnkr.co/edit/Bms3pDdn6XnS2b7gsyQ5?p=preview

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

Sorting elements in an array based on an 'in' condition in TypeScript

I am currently working with an arrayList that contains employee information such as employeename, grade, and designation. In my view, I have a multiselect component that returns an array of grades like [1,2,3] once we select grade1, grade2, grade3 from the ...

javascriptangulartypescript

Can files in a directory be listed using JavaScript without the need for HTML tags?

Currently, I am exploring ways to automate an Angular application using Protractor. During this process, I encountered a situation where I needed to retrieve a list of all the files within a specific folder. In Java, I am aware that we can accomplish this ...

javascriptarraysangularjsfileprotractor

Displaying a subset of categories based on the user's selection

I have been trying to find a solution to automatically display a subcategory select drop-down only when a user selects a category. If no category is selected, the subcategory drop-down should remain hidden. I have searched online tutorials and videos for ...

javascriptphphtmlcategories

angularsjs state provider with multiple parameters

I am struggling to create a state provider that can handle multiple parameters. Is it possible to capture them as an object or array, or do I have to capture them as a string and then separate them? For example, this is my current provider: .state(' ...

javascriptangularjswebsession-state-provider

The most effective method for positioning a child element to the left and top using Flexbox grid

I am currently working on visualizing queues and processes within a system. Each process is associated with a specific queue from which it retrieves data. I aim to create a layout similar to the following: https://i.stack.imgur.com/BXyts.png However, I a ...

javascriptcssreactjsfrontend

Getting the value returned by http.request in an app.get method using express.js

When attempting to deliver data from an API on another domain using app.get, I am able to write the data to the console successfully. However, the data is not showing up on the page ('~/restresults'). This is the current code I have: app.get(&a ...

javascriptnode.jshttpexpresscallback

Allow JavaScript to determine whether to link to an internal or external web address

Currently, I am in the process of setting up a new website and need to create an HTML page with some JavaScript that can determine whether to link to the external or internal IP address. I have researched some JavaScript code to fetch the IP address, whic ...

javascripthtmlnetworking

Retrieve the decimal separator and other locale details from the $locale service

After reviewing the angular $locale documentation, I noticed that it only provides an id (in the form of languageId-countryId). It would be helpful to have access to more specific information such as the decimal separator character. Is there a way to retri ...

javascriptangularjslocalizationlocale

Emphasizing specific lines using an array

There is a block of text containing multiple lines, each wrapped within a span with an incremented value at the end (like line-1, line-2, line-3, and so on) to distinguish between them. <div id="textbody"> <span id="line-1">what is love< ...

javascriptjquery

Asynchronous mismatches occur with React.js useState values

There is an unusual problem I'm encountering where the value passed into useState is different than the variable for useState. This issue occurs consistently on one specific UI component, while others do not experience the same problem. I just want to ...

javascriptreactjsreduxuse-state

Tips for restricting camera movement in threejs

Being new to working with threejs, I am struggling to set limits on the camera position within my scene. When using OrbitControls, I noticed that there are no restrictions on how far I can zoom in or out, which I would like to change. Ideally, I want the c ...

javascriptthree.jsfrontend

Having trouble retrieving state parameters when trying to launch a modal in AngularJS

When the "view detail" link is clicked, I wanted to open a modal for a detailed view of a specific user. However, I encountered an issue where I couldn't retrieve the user ID in the resolve attribute of $uibModal.open(). Strangely enough, the ID is av ...

javascriptangularjsangular-ui-router

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

javascripthtmlhtml-table

Show the tabulated outcomes of entries in a MySQL database and present them using ChartJs

My goal is to show the total number of rows stored in a MySQL Database and present these numbers using ChartJs. However, I am encountering issues with displaying the values correctly when retrieving data from my PHP Script. PHP Code Snippet for Counting R ...

javascriptphpmysqljsonajax

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

The Angular watcher is not triggered when listening for changes from the Date() function

Can someone please help me with a question I have about an Angular directive I am working on? I am new to Angular and it took a lot of courage to ask this question here ;) The directive I have displays the time in a specific format: Application.Directives ...

angularjs

Python's Selenium encountering a NoSuchElementException with the error message "./ancestor-or-self::form"

Trying to create a Python script that allows me to input my credentials and tweet text in the Python console. The script should then log in and post a tweet using Selenium. Everything works fine, except for the final click on the Tweet button which is caus ...

javascriptpythonhtmlseleniumtwitter

What is the simplest way to extract only the error message?

Having this code snippet. $('div#create_result').text(XMLHttpRequest.responseText); If we look at the content of XMLHttpRequest, it shows: responseText: Content-Type: application/json; charset=utf-8 {"error" : "User sdf doesn't exist"} st ...

javascriptjqueryajax

Monitoring the usage of a specific component's screen time in a React Application

Is it possible to accurately track the time a specific component is rendered with certain props and while being on an active screen in React? I've had trouble finding a suitable library for this task. What would be the most effective approach to tackl ...

javascriptreactjs

Is it possible to implement hierarchical validation within reactflow nodes?

I am currently utilizing reactflow to establish a network of sequences, each possessing their own unique "levels." My primary objective is to restrict connections between sequences based on their respective levels. For instance, a level 5 sequence should ...

javascriptnode.jsreact-flow