select2 directive value setting doesn't work #135

maku opened this Issue Aug 5, 2012 · 10 comments


None yet

4 participants

maku commented Aug 5, 2012

requirements for usage of select2

  • it should work in a kind of tagging mode. this means you should be able to add on the fly.
  • working with an object array (e.g. id,name object)

here is a fiddle:
it shows that you are able to set the value after a certain amount of time (via click action).
but when the value is already set at the beginning in the controller it doesn't work correctly.

See also!topic/angular-ui/Yws0P0-Un2c

@ProLoser ProLoser was assigned Oct 4, 2012
ProLoser commented Oct 9, 2012

I haven't been able to check up on this, is this issue still present? The fiddle appears to be working fine.

maku commented Oct 10, 2012

The fiddle doesn't work correctly. The point is that "preselection" doesn't work. I tried it first with setting $scope.selection at the begin of the controller (MyCtrl). Second approach is to try to use a "setTimeout" to preset the selection. Neither approach works...


I believe I figured this one out for maku, have a look here :

The confusion was about your initSelection function and perhaps what 'val()' returns.
In short, initialize the tagsSelection to be e.g. [ '01' , '03' ] (..And not an array of objects like [ { id: '01' } ] )

In long...
In initSelection(), you're iterating through a comma-separated string list of id's (returned by val()).
You were iterating through this: '[object Object],[object Object]' (as a string)

It would be nice to get an array of objects from val(), but alas, haven't figured that out - probably not possible.
Might be better to iterate through tagsSelection itself, in initSelection().


  • tagsSelection is still an array of the objects, but is initialized from the string list of id's.
  • I references newer js files as things were breaking horribly

If you wish to see an example of initializing your selection with an array of objects, have a look here:
It's a bit simpler than your version, but illustrates the point.

@ProLoser ProLoser pushed a commit that referenced this issue Dec 8, 2012
Dean Sofer Attempted fix for #135 and #193 47be18e

yep I am doing quite a complex select2 tags with ajax blar blar; initialising problem; and not easy to create a plunker for

short story

I have input with value "beans,eggs" aka 2 tags

has anyone got tags working in terms of intialization and then sending correct params ie not a random [object Object] attached to the values; its something todo with the ng-model and initSelection but I cannot determine what just yet; I have looked at the above examples but they dont help;



@hookercookerman does #309 fix your problem?


just applied; na still adding objects to form value; I can see just one tag and there is only one tag; however


"[object Object],Ruby"


What? I'm confused, perhaps you should paste some code. If you're manually triggering jQuery you're doing it wrong.

I think this needs to be folded into #309 as I mentioned which will contain a lot of fixes for this behavior when I merge it in (need modifications).


thanks for replys; sorry coffeescript thats how I role

this what I have currently all working besides objects are getting pumped into the value hence when I submit ["object Object] string being sent as well

module = angular.module("brief_creator.controllers")

class NewBriefController
  @$inject = ["$scope", "$http"]
  constructor: (@$scope, @$http) ->
    @$scope.tagSelection = @initTagSelection()
    @$scope.$watch "tagSelection", @changeSkills
    @$scope.tagConfig =
      tags: true
      minimumInputLength: 2
      initSelection: (element, callback) =>
      formatResult: (o) ->
      formatSelection: (o) ->
        url: "/skills/search"
        data: (term, page) =>
          {query: term, with_tag: true}
        results: (data) ->
          {results: data}

  initTagSelection: ->
     skill_values = $("#brief_skills").val()
      skills = skill_values.split(",")
      ({"id" : skill, "term" : skill} for skill in skills)

  changeSkills: (newValue, oldValue) =>
    if newValue
      skills = (skill.term for skill in newValue)
      @$http(method: "GET", url: "/professionals/search", params: {"skills[]": skills}).
        success((data, status, headers, config) =>
          @$scope.professionals = data
        error((data, status, headers, config) =>
          @$scope.professionals = []

module.controller "new_brief", NewBriefController
ProLoser commented Feb 9, 2013
@ProLoser ProLoser closed this Feb 9, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment