Add new option for ui-select2 in angular js

Question

I am using ui-select2 in angularjs which uses select2 plugin of jquery. I have some pre-defined list and then when i start searching for anything and if that is not found in list i want to add a new value. I am doing something like this :

var selectOptions = {
    formatNoMatches: function(term) {
                return "<a ng-click=\"addCountry('abc');\">Add new country</a>";
            }
 };

 $scope.addCountry = function(countryName) {
    console.log (' test');
 };

But the click doesnt work and the console in addCountry is never printed. Any idea how to add new option for ui-select2 in angular js ?

Answer 1

I've done this, not via click but by allowing the user to just enter what they like in the select2 and hit enter:

<input type="text" ui-select2="selectOpts" ng-model="selected"/>

In coffeescript but I hope you get the idea:

  $scope.selectOpts =
    maximumSelectionSize: 1
    data: $scope.someListOfData
    tags: true
    multiple: false
    createSearchChoice: (term) ->
      {id: term, text: term}

I hope that puts you on the right track, the basic thing is to set "tags: true"

Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via this options attribute which is either

and createSearchChoice (search in http://ivaynberg.github.io/select2/ for this):

Creates a new selectable choice from user's search term. Allows creation of choices not available via the query function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase