Comments (18)
The suggestion is OK, I suppose.
As a workaround, you can try and use the Optgroups API to add them later.
(Haven't tried.)
from angular-selectize.
@PhiLhoSoft thanks for workaround sugestion I just added functionality only problem I have is implementing id becouse addOptionGroup needs that id Can u help me with this I just created gist with code that should work --- https://gist.github.com/atheleron/03afae07a5b180c6c265
from angular-selectize.
Can you please set up a Plunker (or Fiddle or whatever) with your code, corresponding HTML and client code, showing it in action?
from angular-selectize.
I just created a plunk I head bit trouble with 2 angular-selectize scripts on same page so I did some changes to suppot both directives selectize and optselect but now its ok check the preview on plank http://plnkr.co/edit/2JG0EEKbLQnpVbXjWpLg?p=info
from angular-selectize.
OK, thanks. At first, I was a bit confused, wondering why you have so much files.
I finally made sense out of that... :-D
Note: I would have used a CDN for Selectize itself, using the standalone version, avoiding to explicitly add the two dependencies. I used <script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
in a Plunk. The non-minified version eases debugging... :-)
Now, I find your Plunk well made, informative and illustrative. Well done.
I haven't fully analyzed the issue yet, but by glancing at the code, I think the main problem is that optgroup isn't available from the start of the controller in the atheleron version, while it is in the machineboy one.
angular-selectize binds its options but actually needs them a init (link() call) time, so they cannot be loaded in a delayed way. I suppose it is a similar issue with optgroup, but it is just an intuition right now. It needs a more thorough investigation.
from angular-selectize.
It fails when calling addOptionGroup which is defined as function(id, data)
, but you call it as selectize.addOptionGroup(scope.optgroups);
, ie. only one parameter.
Moreover, it is called in onInitialize(), so scope.optgroups isn't set yet.
from angular-selectize.
Some errors in your code: the atheleron version doesn't define an option group, like the machineboy version. I added it. As I pointed out, you treat addOptionGroup like addOption, hoping it will process an array, but it is here only a call for one group. So I changed your calls with a map over the array.
http://plnkr.co/edit/TRpM8N3WceevLAAZE1Ri
Seems it works. Again, it is a quick hack / fix, perhaps I overlooked some things.
from angular-selectize.
wooohooooo it woooorks :) :) :)
@PhiLhoSoft First I would like to thank you so much for your effort and support you give me.
I did at first used selectize standalone version I dont know why but select input didnt show up so I used one that required microplugin and sifter
In theory options and optgroups are basicly the same so I said ok lets clone this options and lets try to implement addOptionGroup but since I was cloned generateOptions to generateGroups function witch returns an array I was like why do I need id I mean there is optgroupField witch tells you what id to use to connect options and optgroupValueField that is id of optgroup so why do I realy need that id. then I just added json string to it in hope it will resolve but it didnt. So I was thinking I shoudld make better array and somehow tell addOptionGroup to use id of scope.options but how to get it ?? this is where I stuck. I didnt realise I should make reversable array man that is genious you can call it a hack or fix whatever you call it maybe is not the best solution but it works exactly as it should be its perfect.
Maybe in future we can create some function instead call an array on it each time. I was searching inside of brianreavis/selectize.js to find how he did optgroups but that is to much complex code and requires lots of reading hehe I did find some callbacks that are not inside of documentation like onOptionGroupAdd onOptionGroupRemove and onOptionGroupClear and some other stuff just by searching "optionGroup" maybe it can help if we need to make optgroup function that will also beautify more code and after we can send a @machineboy2045 pull request as optgroups feature functionality but what a heck important is that it works now!! :) :)
from angular-selectize.
I notice there is a bug with _onChange function_ when you select "Game of Thrones" and then
open selectize input list again instead optgroup name there is an id number instead of label but if I commentout onChange function that isn't happening but when I try to submit form without onChange function in my case value is not submitted because value is empty.. So why value changes optgroupLabelField to optgroupValueField it should just change current value of select box not the title??
from angular-selectize.
I updated the pliunk to include an onChange function, and I can reproduce the issue. Actually, the first issue, visible without onChange, is that the Game of Thrones option should be under the group of same name. Not sure why it is not, yet.
from angular-selectize.
I cleaned up a bit the code, removing ngModel from the optgroup generation, or automatic generation of optgroups from a string, as these don't make sense (in the latter case, the optgroupField is invalid).
Opt groups are broken, I am debugging it, but gotta go, Will code back to it later.
from angular-selectize.
hahaha this is crazy or what ok I solved it!!! previous code works fine don't need to remove anything the only problem was naming of _id_ value i just changed _optgroupValueField: id to oid_ so its diferent from _valueField_ and somehow inside root json there is oid with same value as id hahaha and it works optgroupValueField can be named as you wish it will just clone id number of json and it will appended to it here is plunk check Json Response in preview you will see oid http://plnkr.co/edit/gW8gqojbFYaxwgu7vAms?p=preview
from angular-selectize.
I am sorry, but I don't understand your last plunk.
Apparently, you use the same data to define the options and the option groups, which doesn't make much sense for me.
I still think the opt group data should be separate, as I shown in my plunk. Although perhaps they can be loaded asynchronously too.
But you made me take a second look. Actually, I found out that the values defined in the optgroupValueField property must match the values in the optgroupField defined in the options.
In other words, in my plunk, ogid's values in the optgroup definitions must match values of parent_id in the option definitions. In short, there was no need for a parent_id field in the optgroup definition.
I think that null parent_id isn't a valid value, though.
Note: my previous version was calling selectize.addOptionGroup(g.id, g);
which is incorrect, supposing an id field was defined. Now it uses selectize.addOptionGroup(g[config.optgroupValueField], g);
.
And I still think the code I removed isn't useful: you will rarely refer to a group by its full name in the options, I think. And you won't define optgroups from the model, too (unlike selected options).
from angular-selectize.
OK, if you want to load groups dynamically as well, you can.
I updated the plunk, using modified Json data, separating group definitions from options (and changing null parent_id to 11).
Changed the machineboy code as well. Both work fine, now.
Still at http://plnkr.co/edit/TRpM8N3WceevLAAZE1Ri?p=preview
from angular-selectize.
Last note: I mentioned that the wrapper should call registerOption instead of addOption, to distinguish user tags from initial tags. Likewise, we should call registerOptionGroup instead of addOptionGroup, because it frees us from having to specify an id (which is stored back to the data anyway) and doesn't trigger an event (not useful initially).
from angular-selectize.
Thanks a lot PhiLhoSoft !
You save us some long hours (dev) with your modified version for optgroups !
from angular-selectize.
I've added an example of optgroups to the plnkr demo. But the directive still does not support dynamic optgroups. This might be a good feature to add in the future.
from angular-selectize.
is dynamic optgroups supported now?
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.