Skip to content
This repository

select2 directive value setting doesn't work #135

Closed
maku opened this Issue August 05, 2012 · 10 comments

4 participants

Martin Dean Sofer RabidArts Richard Hooker
Martin
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: 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

Dean Sofer
Owner

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

Martin

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.

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
Owner

@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

$(#theinput).val()

"[object Object],Ruby"

Dean Sofer
Owner

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

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.