Comments (12)
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.
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.
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.
Well that would mean that someone should change the models/object to suit the selectize dropdown which is imo unacceptable..
from angular-selectize.
+1 needs way to bind to objects properly
from angular-selectize.
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.
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.
@machineboy2045 Any thoughts on this one?
from angular-selectize.
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.
@xeroxoid is this issue still present in v3?
from angular-selectize.
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.
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)
- Allow-Clear Option to Clear the selected value
- Restrict enter key to select the options HOT 1
- NPM repo is out of date HOT 2
- How do I select an item programatically? HOT 1
- can't include in entry webpack file....
- Angular missing as dependency in bower.json
- performance ui-select vs angular-selectize demo
- Impossible to select value in angular 1.6.4 HOT 5
- Is there a way to change maxItems value based on user activity? HOT 1
- Two dataway binding does not respect order - Regular select dropdown does HOT 2
- Angular selectize directive - I can't type in input when I select empty option
- selecting data from list and while reomving it doesnot save data on save button angularjs
- Allow edit mode for selected option HOT 1
- Handle large amount of data HOT 1
- selectize does not load
- Selectize does not seem to work in IE11 with older angular versions HOT 3
- Verision 3.0.2 does not have a release in Github HOT 1
- Input styles
- Label field going thru $sce.trustAsHtml() ? HOT 1
- When selectize-input is focused and i click on it - the Dropdown close and open every click. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-selectize.