angular-chosen: Setting angular-chosen directive ng-model attribute from a controller function, angular-chosen does not update it.

Hello Leo, angular-chosen directive is a time saving piece of code, obrigado thanks.

I’ve run into an issue when moving from v1.3.0 to v1.5.0;

Setting chosen directive ng-model attribute from a ctlr function, angular-chosen does not update it.

because initOrUpdatefunction returns before it reaches element.trigger('chosen:updated'). After some inspection, commenting the return statement, made it work.

if (dropListDom && dropListDom.length > 0 && dropListDom.css("left").indexOf("0") >= 0)
       { //return; /*commented to test*/}
 return element.trigger('chosen:updated');

However, console.log shows me both approaches (via chosen or via function) enters the condition, so the root cause it’s not the return statement. The fact is that via function, the dropListDom.css do not receive de .ng-valid-parse class. Maybe this is the reason, but my skills cannot ensure that. And also I don’t know why, when using the fn, the directive updates twice.

Thank you, valeu! -egidio

chosen 1.6.2 / angular-chosen v1.5.0

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 26 (14 by maintainers)

Most upvoted comments

What works for me was: NOTE: I tried a custom selected variable, nop, it does not work but the convention is all right.

$scope.object = {
   selected: [0]
}
$scope.objects = [
{
  id: 1
  name: "Han Solo"
},
{ ... }
]

and in the view

<select 
  chosen 
  multiple
  data-placeholder="Select one or few star wars heroes"
  ng-model="object.selected"                                                                                                                                                       
  ng-options="o.id as o.name for o in objects">
  <option value=""></option>
</select>

and it works quite great! @leocaseiro thanks, carnal!!!

thelastinuit on Oct 18, 2016

Just an update that any better fix to avoid the scroll go to the top will be accepted as a PR.

PS: I’m also planning to implement a kind of emit call for chosen:update. Probably will work on that this weekend. (If I have time to do so).

leocaseiro on Nov 2, 2016

Here is a Plunker https://plnkr.co/edit/MxeMGV4BL5E5LWwRQ4ZU?p=preview

The issue is as we have seen that there are CSS changes where the left attribute of chosen-drop is -9000px (or something else containing a 0) instead of -9999px.

I got this issue because I was using the styling sheet from angular-timezone-selector. https://github.com/mishguruorg/angular-timezone-selector/blob/master/styling/angular-timezone-selector.css#L22

jakob-lundberg on Oct 28, 2016

Edit @leocaseiro Thanks again for your help. It looks like it was a CSS issue.

I had:

.chosen-container .chosen-drop {
  left: -9000px; //instead of -9999px
}

billxinli on Oct 28, 2016

this still breaks my implementation; Happy to submit a PR to remove the check since it is (imo) a faulty check anyways. left: 0px, 10px or even 65709px hit by this check.

lucienimmink on Oct 20, 2016

Can you explain the thought behind this check please dropListDom.css("left").indexOf("0") >= 0

lucienimmink on Oct 20, 2016