0

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 ?

insomiac
  • 5,648
  • 8
  • 45
  • 73
  • I'm pretty sure the ng-click is not working because this code is not compiled by angularjs since you output it at runtime... Can you provide us a plunker or a fiddle? It would help us to find a solution from what you already have. – Galdo Aug 26 '13 at 16:10
  • i tried $compile ("Add new country") ($scope), but this returns [object object] instead of html; – insomiac Aug 26 '13 at 17:22

1 Answers1

0

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

Steve
  • 1,457
  • 12
  • 25