I'm using angular-ui-select and I have a question. How can I modify ui-select so it would be possible to add items manually - not only choosing from existing items in ng-model but adding a new element.

Thank you in advance

I'm using angular-ui-select and I have a question. How can I modify ui-select so it would be possible to add items manually - not only choosing from existing items in ng-model but adding a new element.

Thank you in advance

• javascript
• angularjs

• If you can review my answer. I think is what you were after. – Gerard Sans Commented Sep 1, 2015 at 18:02

5 Answers 5

Recently I come up with a solution for this. You can use the refresh option in ui-select-choices to add a bit of logic and achieve what you want.

<ui-select-choices ...
  refresh=”main.refreshResults($select)” 
  refresh-delay=”0"
>
  <span>{{table.description}}</span>
</ui-select-choices>

Then on the controller

function refreshResults($select){
 var search = $select.search,
   list = angular.copy($select.items), 
   FLAG = -1;

 //remove last user input
 list = list.filter(function(item) { 
   return item.id !== FLAG; 
 });

 if (!search) {
   //use the predefined list
   $select.items = list;
 }
 else {
   //manually add user input and set selection
   var userInputItem = {
     id: FLAG,
     description: search
   };
   $select.items = [userInputItem].concat(list);
   $select.selected = userInputItem;
 }
}

I am using the search field ($select.search) to achieve it and a basic object structure of id and description. Hope it helps.

Plunker

Just add tagging="true" into ui-select directive please see that demo:

http://plnkr.co/edit/hFxGahJEFIggsL2Wdsli?p=preview

ie:

 <ui-select multiple ng-model="multipleDemo.colors" tagging="true" theme="select2"  style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in peopleAsync | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

When you use a string , just add tagging , but when you use a object, you can get some error.

In this case, you need to specify transform function to tagging. this function should return the new object. see the code below:

<ui-select multiple tagging="transformFunction" tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
    {{color}}
</ui-select-choices>
</ui-select>

and in your controller

transformFunction = function(new_value){ //new value is a string
   //now construct the object and return them.
   var new_object = {};
   new_object.name = new_value;
   new_object.... = ...
   //some http request if you need them.
   //some treatement

   return new_object;
}

Feel free to refer to this example:

http://plnkr.co/edit/m1SQXUxftBLQtitng1f0?p=preview

ui-select has quite a few bugs regarding tagging on non-multiple select boxes. The alternate solution I tried is quite simple:

<ui-select-choices repeat="name in names.concat($select.search) | filter: $select.search">
    <span ng-bind-html="name"></span>
</ui-select-choices>

The key bit here is names.concat($select.search). This might not be performant for large lists but it works.

You must have a model I think, however, you can always add more items to the model.

For example if you have a model called

$scope.persons = [
{ name: 'Adam',      email: '[email protected]',      age: 10 },
    { name: 'Amalie',    email: '[email protected]',    age: 12 },
    { name: 'Wladimir',  email: '[email protected]',  age: 30 },
    { name: 'Samantha',  email: '[email protected]',  age: 31 },
    { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
    { name: 'Natasha',   email: '[email protected]',   age: 54 },
    { name: 'Nicole',    email: '[email protected]',    age: 43 },
    { name: 'Adrian',    email: '[email protected]',    age: 21 }]

You can add a person to that list using

$scope.persons.push({ name: 'Nils', email: '[email protected]', age: 24 })

So if you have an input field (you can have one input field for email, and one for age)

<input ng-model="newPerson.name"> 
<input ng-model="newPerson.age">
<input ng-model="newPerson.email"> 

(Write nils in name input, write [email protected] in email and 24 in age input.)

and a button

<button ng-click="addPerson()">

And in your controller have

$scope.newPerson = {name : "", email : "", age : ""}

When the user presses the button, the function

$scope.addPerson() = function(){
    $scope.persons.push($scope.newPerson)
    $scope.newPerson = {Name : "", Email : "", Age : ""}
}

will be called and the model $scope.persons will be changed and added to you ui-select model.

ui-select MUST have a model, but you can easily add any items to the model.