select2 directive value setting doesn't work #135

Closed
maku opened this Issue Aug 5, 2012 · 10 comments

Projects

None yet

4 participants

@maku
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: http://jsfiddle.net/maku/7AvKZ/
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 https://groups.google.com/forum/#!topic/angular-ui/Yws0P0-Un2c

@ProLoser ProLoser was assigned Oct 4, 2012
@ProLoser
Member
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
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...

@RabidArts

I believe I figured this one out for maku, have a look here : http://jsfiddle.net/PlaceboZA/ezW9B/2/

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

Notes:

  • 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

UPDATE:
If you wish to see an example of initializing your selection with an array of objects, have a look here: http://jsfiddle.net/PlaceboZA/nwmrp/
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
@hookercookerman

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;

:)

@ProLoser
Member

@hookercookerman does #309 fix your problem?

@hookercookerman

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

$(#theinput).val()

"[object Object],Ruby"

@ProLoser
Member

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

@hookercookerman

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) =>
        callback(@$scope.tagSelection)
      formatResult: (o) ->
        o.term
      formatSelection: (o) ->
        o.term
      ajax:
        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
Member
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