Giter VIP home page Giter VIP logo

Comments (12)

azharkhan avatar azharkhan commented on June 23, 2024 1

this seems to be a persistent issue with dynamic options.

i'm building out a list of columns from an uploaded CSV which is not available at the time of the config being loaded, since it has to be uploaded, and the scope variable is then updated with the list of columns, but I'm unable to see the selectize dropdown updated once the list of columns is available.

from angular-selectize.

xeroxoid avatar xeroxoid commented on June 23, 2024

So what I did for now (but seems like a hack) is the following:

onInitialize: function(selectize){
  _.each(vm.currentUser.movies, function(movie) {
    selectize.addOption(movie);
    selectize.addItem(movie._id);
  });
}    

which seems to work. So the problem is that
a) the options are not populated before
b) my model is an array of full objects, thus I either need to _.pluck(vm.currentUser.movies, '_id'); or add each via iteration.

from angular-selectize.

adrienbourgeois avatar adrienbourgeois commented on June 23, 2024

A quick fix that I've found around that is to use the default valueField and labelField. So I've used objects like: {text:'the label', value:'the value'} and it's working fine. I didn't have the time to investigate further but so it looks like somewhere in the directive we are always using the defaults valueField and labelField even if some others were specified in the configuration.

from angular-selectize.

xeroxoid avatar xeroxoid commented on June 23, 2024

Well that would mean that someone should change the models/object to suit the selectize dropdown which is imo unacceptable..

from angular-selectize.

davidsielert avatar davidsielert commented on June 23, 2024

+1 needs way to bind to objects properly

from angular-selectize.

PhiLhoSoft avatar PhiLhoSoft commented on June 23, 2024

I had a similar issue. I found out that I was initializing $scope.config (whatever variable referenced in the config attribute of the directive) too late in my controller, so the binding didn't work: it is done only once, late updates are ignored.
I have just put the init of this scope variable in the body of the controller and it worked fine...

from angular-selectize.

PhiLhoSoft avatar PhiLhoSoft commented on June 23, 2024

For our projects, I made a SelectizeService which wraps calls to the Selectize component exposed from onInitialize.

I let Selectize do the loading of its options, so it just manages the loading class and updates correctly the options.
I do it this way:

    /**
     * Starts to load the data (by calling the loadFunction) after setting the loading class on the Selectize component.
     * @see SelectizeService#finishLoading
     */
    service.initLoading = function(selectizeControl, loadFunction)
    {
        // loadingFinished is a function given by Selectize, to call with the results once they are fetched
        var wrappedLoadFuntion = function(loadingFinished)
        {
            // Memorize the given function
            selectizeControl._finalizeLoading = loadingFinished;
            // Do the data loading call
            loadFunction();
        };
        // load() sets the loading class on the control,
        // then call the given function with an argument which is a function to call with the results.
        selectizeControl.load(wrappedLoadFuntion);
    };

    /**
     * To call on data loading completion, with the control (to remove the loading class),
     * and the received data (optional if options are created by other means).
     */
    service.finishLoading = function(selectizeControl, data)
    {
        selectizeControl._finalizeLoading(data);
    };

A bit convoluted, but it works.

from angular-selectize.

ElMassimo avatar ElMassimo commented on June 23, 2024

@machineboy2045 Any thoughts on this one?

from angular-selectize.

machineboy2045 avatar machineboy2045 commented on June 23, 2024

Try the latest version. I patched a couple bugs yesterday. If that doesn't help I'll look into it some more.

from angular-selectize.

machineboy2045 avatar machineboy2045 commented on June 23, 2024

@xeroxoid is this issue still present in v3?

from angular-selectize.

xeroxoid avatar xeroxoid commented on June 23, 2024

Yep the issue is still present and it will always be until two-way object binding is in place. ATM you still have to pluck or set strings for values into setValue or addItem so you always need an onInitialize if you want to pre-select saved values.

from angular-selectize.

SearchingSoul avatar SearchingSoul commented on June 23, 2024

Just found the following -
if my ng-model = "myModel"
following seems to work for me:
$scope.myModel = ["value1","value2","value3"] as long as they are these are part of the model.

from angular-selectize.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.