This is a screencast that shows how to integrate the awesome Chosen plugin into AngularJS.
Chosen is one of my new favorite jQuery plugins and I wanted to show how easy it was to integrate into AngularJS.
Files are on Github
https://github.com/simpulton/angular-chosen
Chosen
http://harvesthq.github.com/chosen/
If you have any technical questions check out the awesome mailing list here:
https://groups.google.com/forum/?fromgroups#!forum/angular
Thanks!
Great screencast! Superb work as always!
You may want to instead consider Select2 (a much better fork of chosen) and AngularUI (https://angular-ui.github.com/angular-ui/) which already has a Select2 wrapper along with a lot of other contributions too. We’re also constantly looking for more core contributors 🙂
king of directives!
Thanks for the screencast. I plan to watch one screen cast every evening.
Does this mean I need to do a screencast every evening? 😉 If you have anything in particular you want to see, let me know!
Thank you, I was beating my head against this for a couple hours this morning. A suggestion: you could make it reusable by adding an attribute that specifies the model property to watch:
angular.module('myApp').directive('chosen', function () {
var linker = function (scope, element, attrs) {
scope.$watch(attrs.watch, function () {
element.trigger('liszt:updated');
});
element.chosen();
};
return {
restrict: 'A',
link: linker
};
});
Solid! Thanks for the suggestion!
How can you set the selected options? For example, it works when I am first saving a record. But then if I go back in to edit the record, the chosen select doesn’t show the currently selected items…even though I have set recipientsList to contain the selected Options.
@max4g good question! 😀 I am working on that very problem myself at this very moment… if anyone figures it out before me… holla!
As ugly as this is…I just dropped this line in my view to make this work until I can find a real solution…there must be a better way 🙂 :
setTimeout(“$(‘.chzn-select’).trigger(‘liszt:updated’);”, 1000);
I just pushed a change to the repo. I added a $watch to the actual ng-model property and when that changes it updates the list. It worked in preliminary testing.
Give that a spin and if it is good, I will write a quick post about it.
That doesn’t work for me…the watch does fire, but when I get into the screen the previously selected values aren’t displayed. If I pick a new one, then the rest of the values are filled in. Feels like it’s really close though.
@max4g I was facing this same problem, make sure that your selected model is an array.
For example
$scope.selectedChosen = [1];
That should make it work with the code from simpulton, thanks btw!
Thanks…that did fix my problem, it is working now.
Great video, and it almost works perfectly except when trying to remove items. If I remove an item, and afterwards tries to add it, it adds a duplicate of that item. Do any of you also experience this issue?
Thanks for this post!
@Dean – I chose to implement my directive with the help of this post after angularUI-select2 implementation failed to maintain view when changing the model in multiple select.
@simpulton – I chose to force a model and to leave only one property to maintain value. please tell me what you think:
https://gist.github.com/royts/5894780
+1 I dig it
Hi ! This is great tutorial, but I’m stuck, please can you help me ? Here is my question on SO:
http://stackoverflow.com/questions/18262442/chosen-angular-directive-doesnt-get-updated
Hello, I’ve followed your tutorial and it was great ! But unfortunately, I got stuck, can you please see my question on SO and help ?
Here’s link:
http://stackoverflow.com/questions/18262442/chosen-angular-directive-doesnt-get-updated
I’ve solved it, solution was pretty simple actually. The problem was that chosen din’t see updates in $scope.selectedChosen = [], so I added these lines into directve:
scope.$watch(attrs[‘ngModel’], function() {
element.trigger(‘chosen:updated’);
});
I love the tutorial and it’s exactly what I need but for some reason I am getting an error in AngularJS stating “Object doesn’t support property or method ‘trigger'”.
any Ideas why this would be?
Also are you adding the chosen style to your objects with — class=”chzn-select” I cant find this class in the chosen CSS?
You may need to use $watchCollection() instead of $watch() to watch a list?
Doesnt work for me
Masterful! Thanks a lot!
Hi,
This is great tutorial. Thanks!
I have a question related to selected items list.
Is it possible to add a scroll bar to the selected items list box? I am asking because I implemented select all option and when the list of items is too big, the selected list box looks bad once all the items have been selected
If this is being used with an older version of Chosen, and dynamic updates don’t seem to work, you may have to change the “.trigger(‘chosen:updated’)” back to “.trigger(‘liszt:updated’)”
Ignore my previous comment. I got this article confused with the code I downloaded from https://github.com/localytics/angular-chosen
Awesome man! Helped me 😉
Hi,
Thanks for this tutorial, I downloaded your code, run it, but I only got this :
http://s29.postimg.org/ttpundaqf/Screen_Shot_2014_06_27_at_11_02_24_PM.png
thanks, your help is appreciated.
Brilliant, thanks 🙂 The github code is even shinier, worked like a charm.
Hi,
How to disabled this chosen component?
Thanks in Advanced.
Hi,
Love it! Is it possible to update other chosen dropdownlist base on a previous selection? I mean, if you have 2 chosen ddl, and filter the second ddl based on first one selection.
Best regards
Super helpful – thank you!