leocaseiro / angular-chosen Goto Github PK

I was able to get the spinner to work but the undefined-checking makes it spin as soon as the page loads. In my case, the $resource.get doesn't fire until a condition is met. The spinner should start only at that moment.

I am working with the classic location selector, and its only the selection of country, that states are populated, and on selection of state, that cities are populated.

Any suggestions would be appreciated.

If i am searching for a text and its not available in the list and i want to add the item in list, it doesnt look like i can add that is there any way i can do that ?

Hi!
I have 2 chosen selects. One with parent and other with children values.I am populating parent model based on the model of child.Everything works fine as long as each parent has only one child.
But if parent contains multiple children and 2nd child of the certain parent is selected in the chosen select box,corresponding parent chosen select is not showing the model value.

These are my chosen select

This is my angular code for populating the umbrellas model according to fund model

if ($scope.childrenModel.length == 1) {
$scope.parentsModel.push($scope.someName);
}
When i am checking the value of $scope.parentsModel its showing correct value in it.But its still not getting displayed on chosen Select as selected option.

If you add "allow-single-deselect='true'" to a select with ng-options you don't get deselect functionlity

angular-chosen-master\example\index.html:
added allow-single-deselect="true" but can't deselect

Passing options in as a hash: {{ woo }}

I just got this error only when using iPhone/iPod touch.. You can see it when using Safari with iPhone selected as User-Agent

[Error] Error: 'undefined' is not an object (evaluating 'chosen.default_text')
initOrUpdate@http://..../angular-chosen-localytics/chosen.js:60:40
$render@http://..../angular-chosen-localytics/chosen.js:75:32
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:189:12
$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:109:81
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:112:180
h@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:72:306
w@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:77:446
onreadystatechange@https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:78:376
    (anonyme Funktion) (angular.min.js, line 92)
    error (logging.js, line 38)
    $digest (angular.min.js, line 109)
    $apply (angular.min.js, line 112)
    h (angular.min.js, line 72)
    w (angular.min.js, line 77)
    onreadystatechange (angular.min.js, line 78)

When chosen is used in a tab and that tab is not the 1st tab of the tabset, the widget does not show.

Documentation and examples need to be updated.

It's an off by 1 error. ng-options is generating the list with n+1 options(the +1 being an empty option). The solution is to watch the select.length and on change throw an updated call.

Here is the fix, jam it in the linker function:

scope.$watch(function(){
    return element[0].length; 
}, function(newvalue, oldvalue){
    if (newvalue !== oldvalue) {
        element.trigger("chosen:updated");
    }
});

Like the title says; bower install angular-chosen-localytics` gives us the wrong version ( at least not the latest version ). Might want to push the new version of the plugin to bower.

Cheers.

Tag 1.0.1 has a bower.json containing version 1.0.0. These versions should match.

I've been using ng-change on my chosen select box and it's been working quite well; however, the ng-change event doesn't get triggered when using the single deselect feature. Does this need to be implemented on the angular-chosen side?

Much like what I suggested with angular-bootstrap, you should register this component with Twitter Bower.

HI,

When I try to move angular-chosen inside of my own directive html template I have some issues:

• when construction is made within ng-hide chosen width is 0. (ng-if works fine)
• ng-model field is not updated. (first time it is read fine)

Besides I set the witdh:90% the directive convert to number XXXpx cause to multiple select not be responsive.

and the css is element.style { width: 294px; } .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; zoom: 1; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

Original jsfiddle with no filters, works as expected. http://jsfiddle.net/wKMZM/5/

Updated jsfiddle fails even to render the control. http://jsfiddle.net/wKMZM/3/

In the updated version, I have updated the ng-model to be associated with an array of objects. I have added a directive to convert it to an array of string in the filter directive.

Any idea, what I am missing?

Posted also on SO also: http://stackoverflow.com/questions/24909938/angularjs-filtering-with-chosen-control

Hi,

angular-chosen doesn't work well with ngDisabled. I add the following codes:

          attr.$observe('disabled', function (value) {
            setTimeout(function() {
                element.attr('disabled', value).trigger("chosen:updated");
            });
          });

Sorry if this is not the place to ask this, but how do I get the chosen option that I am acting upon? For instance, if I have an option called "Item 1" and I click the "x" to remove it, I want to tell my ng-change event to make an ajax call to remove that item. Right now the model returns an array of items that remain selected, but not the one that was removed.

hi, i'm using ng-options together with chosen ... once my collection goes empty i get the message that there are no items. But if my collection has items again it doesn't add them, it stays empty. I'm using 1.1.5, so i'm not sure if it has anything to do with that or that there is a bug. Do you have an idea what this could be? Also the select element isn't updated either after it went empty ... if i remove the chosen directive from my select element, then it works.

jsfiddle with filter: http://jsfiddle.net/wKMZM/11/

Any idea why the filtering is not kicking in? I was expecting to see ninja cat selected in the controller similar to http://jsfiddle.net/wKMZM/10/.

Posted on SO also at: http://stackoverflow.com/questions/24909938/angularjs-filtering-with-chosen-control

Assuming that I have a collection of elements with a group property, is there a way to use 'ng-options' in such a way that it will produce correct '' tags? As I can't think of a way of doing this...

To reproduce

1. Select any option
2. Select the last option
3. "Cannot set property 'selected' of undefined"

Selecting the last option first causes no problem.

Here's a plunkr example: http://plnkr.co/edit/uLls4HEvXSSJOxX1JlUD?p=preview

Hi
I get this error only in Chrome not in any other browser could any one point me in the right direction this is might be my own fault but the error msg could be better:

Chrome stacktrace:
TypeError: Cannot read property 'default_text' of undefined
at angular.module.directive.link.initOrUpdate (http://localhost:49904/Content/js/lib/chosen.js:59:40)
at angular.module.directive.link.ngModel.$render (http://localhost:49904/Content/js/lib/chosen.js:74:20)
at Object.ngModelWatch (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.js:18352:14)
at Object.ng.config.$provide.decorator.$delegate.proto.$watch.watchExpression (:754:29)
at Scope.$get.Scope.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.js:12443:40)
at Scope.ng.config.$provide.decorator.$delegate.proto.$digest (:844:31)
at Scope.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.js:12724:24)
at Scope.ng.config.$provide.decorator.$delegate.proto.$apply (:855:30)
at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.js:8328:45)
at completeRequest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.js:8533:7)

Code:

$scope.load = function () {
$scope.konton = //fetch data
}

Html:

When i Debug Firefox never enter this method only Chrome and the chosen var get undefined:

    initOrUpdate = function() {
      if (chosen) {
        return element.trigger('chosen:updated');
      } else {
        chosen = element.chosen(options).data('chosen'); <-- this is undefined
        return defaultText = chosen.default_text;
      }

Per readme here, allow-single-deselect is supported, and it used to be until 1.0.3. 1.0.4 regressed in that it no longer works.

I couldn't figure out from the commits, or else would have made a PR.

given the example : Changing the ngModel externally: {{ myPets }}

i removed 'multiple' from the selected and commented out
return $scope.myPets.push('hamster');
so to only have one selected item. i expected the select to default to 'cat' but it's still on 'Select an Option'. is this a bug? how can i get it to default to 'cat'?

It would be great to use this library with chosen or select2.

(I believed select2 was based on chosen but I didn't find any official confirmation).

I know there's already a angular-ui ui-select2 but I prefer this one :

• $translate 2 support (translations with promises)
• ngOptions support
• ...

example:

<select name="subject" ng-model="contactForm.subject" ng-init="contactForm.subject='value1'" required chosen disable-search="true" width="260">
      <option value="value1">test1</option>
      <option value="value2">test2</option>
      <option value="value3">test3</option>
</select>

with 'chosen' directive in hidden (original) select tag present bad option like this (before any changes):

<option value="? string:value1 ?"></option>

and I got javascript error if I checked last option in chosen select.

P.S. http://jsfiddle.net/darkfisk/UvzZf/
P.S. it seems to me that the initialization of the Chosen happens before the execution ng-init, which causes an error.

When using angular-chosen on a multiple select the selected items are reordered in the same order the options are displayed in the dropdown. The selected items should be kept in the order they are selected, like in the demo for multiple selects at http://harvesthq.github.io/chosen/.

How I can do that when it has focus display options?

Without a license, people can't legally use this directive in their projects. Please consider adding one!

If you use the ng-model attribute, all the data-option-array-index attributes for li the elements under the chosen-results list are shifted by one (1, 2, 3... instead of 0, 1, 2...). Selection works the first time -- I'm guessing because the placeholder option is in the array and shifting all the other elements -- but every subsequent selection actually assigns the value after the selected value to the model (click on the second option, and the model is assigned the value for the third option). Picking the last value causes JQuery to throw an error.

How to reproduce:
Open angular-chosen/example/index.html
Pick a value from "Chosen with static options"
Pick another one and watch the model update to the value after it (or if the value selected is the last one, see JQuery throw an error in the console)

I'll try to see if I can fix it.

I am using Chosen v1.1.0 with angular-chosen plugin on Google Chrome Version 33.0.1750.149. It works fine until I open browser console to emulate a mobile version and refresh the page. Is there a particular reason for this ?

The module to be registered as a dependency is angular-chosen not localytics.directives.

1.0.6 should be retagged after issue #45 was fixed

When I try to set the html attribute "no-results-text" to a special character (like 'á' or 'é'), angular throws a lexer error since it tries to evaluate it as an expression at line 41:

return options[snakeCase(key)] = scope.$eval(value);

I could solve it by specifically filter this attribute separately but the issue should be addressed IMO

For some reason the list isn't populated with my ng-options. If I use the select without the chosen directive I can see everything, but whenever I add the chosen directive the list is empty.

I'm using ajax loading.

jade:

select(chosen, ng-options='c._id as c.name for c in courses', ng-model='selectedCourse')

in the controller:

$scope.courses = Course.query();

Again, without the chosen directive the list is fine.

Table rows with a 'chosen' select are invisible while dragging. Works when I remove the 'chosen' directive.

I also filed an issue there: angular-dragdrop/angular-dragdrop#21

Is it possible to have disabled options? If so please advice how to do it.

When using allow-single-deselect, the ng-model gets set to null by deselecting which is not compatible with angular filter.

I worked around by manually deleting the property

for k,v of factory.filter
      if !v
        delete factory.filter[k]

I'm attempting to have a list of elements for my chosen field and disabled a few based on the disabled attribute of their object. This works great, however, when I switch between elements, the next value for ng-model is undefined. I read to add the empty option HTML element to the chosen element, however, upon doing so, my disabled options are offset by 1. Is there a way to have the proper values disabled while still swapping between ng-model values?

Thanks!

return options[snakeCase(key)] = scope.$eval(value);

changed to

return options[snakeCase(key)] = value;

works however

I will provide more details and a JSFidde later.

Hi,

is it possible to pass an expression to data-placeholder instead of a simple string? It'd be very handy working with i18n applications, and in conjunction with, for instance, angular translate.

Thanks for the great directive!

I have test.html:

body ng-app="app"
select chosen
option 1
option 2
/select
/body

and test.js:

var app = angular.module('app', ['localytics.directives']);

And i get following error:

TypeError: Object [object Object] has no method 'chosen'
at initOrUpdate (http://localhost/test/bower_components/angular-chosen-localytics/chosen.js:58:30)
at link (http://localhost/test/bower_components/angular-chosen-localytics/chosen.js:83:11)
at nodeLinkFn (http://localhost/test/bower_components/angular/angular.js:6271:13)
at compositeLinkFn (http://localhost/test/bower_components/angular/angular.js:5682:15)
at compositeLinkFn (http://localhost/test/bower_components/angular/angular.js:5685:13)
at publicLinkFn (http://localhost/test/bower_components/angular/angular.js:5587:30)
at http://localhost/test/bower_components/angular/angular.js:1306:27
at Scope.$eval (http://localhost/test/bower_components/angular/angular.js:12045:28)
at Scope.$apply (http://localhost/test/bower_components/angular/angular.js:12145:23)
at http://localhost/test/bower_components/angular/angular.js:1304:15 Is it bug or my mistake?

If the model is updated externally to this directive (ex. from a rest call) the directive doesn't update chosen. Something like

    require: 'ngModel',
        link: function(scope, element, attr, ctrl) {
            ctrl.$render = function () {
                $timeout(function() {element.trigger('chosen:updated');});
             };

should work.

Hello,
I have a question regarding dynamic IDs.
I'm generating many boxes and they get their ID by id="{{id}}". e.g. id="test" When chosen is applied to the select element, the ID of the chosen generated HTML is id="__test___chosen". Is there a way to get the ID to be id="test_chosen" by not setting it hardcoded in the HTML? I hope you understand my problem and might know an answer.

Hi,

there are some way to disable the control? I have tryed to put disabled in original select
but doesnt works

thanks

When selecting multiple items from a dropdown and holding ctrl, it would be more user friendly to prevent the default action to scroll to the top of the dropdown menu. I'm dealing with a dropdown of 200+ items and this is an annoying feature, to say at least.

Hello!

I am having trouble with options mapped to a standard filter - the options stay in the chosen dropdown, just don't work while the model is changed. Is there a way to support this?

select(chosen, ng-model='data.item', ng-options='item.value as item.name for option in data.items | filter: search')

Thanks!