CODEWITHSUNDEEP
javascriptangularjs
Amit
Amit

Reputation: 338

Allowing duplicate value in ui-select component

ui-select does not allow duplicated values to be insert in a select list item. I have one use case where a user can enter a value multiple times. The value entered by the user will not be selected from the drop list.

Is it possible to achieve this with a ui-select directive? 

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="ctrl.multipleDemo.colors" theme="bootstrap" sortable="true" ng-disabled="ctrl.disabled" 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 track by $index">
  {{color}}
    </ui-select-choices>
</ui-select>

Here is the sample plunk http://plnkr.co/edit/s407ooeoeFh2dH9DynZy?p=preview

The user may enter manual values like 'a' in this ui select. After entering 'a' once, a user may not enter 'a' again, as ng-repeat do not allowed duplicate value. I tried to use track by $index so that it can take the array position but I am not able to enter same value twice.

Upvotes: 3

Views: 1052

Answers (1)

Chris Parton
Chris Parton

Reputation: 1064

ui-select doesn't currently support this functionality. I requested this feature yesterday and it was unfortunately rejected. I've implemented it in my own fork (see commit) and linked that to the issue.

If you still need this feature, you can try forking/downloading my repo, switching to the feat-duplicates-allowed branch and building the code with gulp. To enable, simply add duplicates-allowed="true" to your ui-select element.

Feel free to add a thumbs up or comment to the UI select issue if you think it'd be a useful contribution to the library.

Disclaimer: I've unit tested the basic cases for the feature, and it works for my use case, but I haven't done extensive testing of edge cases.

Upvotes: 1

Related Questions