Skip to content
This repository

select2 directive value setting doesn't work #135

maku opened this Issue August 05, 2012 · 10 comments

4 participants

Martin Dean Sofer RabidArts Richard Hooker
maku commented August 05, 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

Dean Sofer

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


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.

Richard Hooker

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;


Dean Sofer

@hookercookerman does #309 fix your problem?

Richard Hooker

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"

Dean Sofer

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).

Richard Hooker

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

Dean Sofer ProLoser closed this February 09, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.