ui-select2 with no initial options

[daryllstrauss]

I had a controller that needed to initialize a ui-select2 from data that would be fetched from a service. The controller basically did this:

`$scope.allprojects=Project.query({'scope':'all'});`

The partial was written like this:

<select ui-select2 ng-model='project'>
<option ng-repeat='proj in allprojects' value="{{proj._id}}">{{proj.name}}</option>
</select>

It had strange inconsistent results. Sometimes it worked fine.

1. The menu would be empty to start and would be wide enough to hold my widest project string.
2. The menu would default to the first item in the project list.
3. The model would track changes in the ui-sliders.

Most of the time it would fail:

1. The menu would be very narrow, just showing me the triangle.
2. There was no item selected at startup.
3. If I opened the ui-select2 I would see the list of projects, and I was able to select them, but my model wouldn't update.

I worked around the problem by adding a:

Project choice before the repeating clause. That would initialize to the word "Project", but I noticed the menu was only as wide as the word "Project" not the widest choice. If I selected a wider choice the menu would resize. The model would update correctly as the menu changed.

I hope that's enough information for you to diagnose with.

[ProLoser]

For width calculations, you have to sort it out yourself. Use explicit dimensions or mess with Select2's width calculation property.

As for initial value, there is no reason why any option should be selected by default (assuming the value of your ng-model is empty). If you want to work with initial values, make sure you set the value to your ng-model. Remember that you can set it to the first value of the response object once it completes its request.

[daryllstrauss]

My point is that the behavior is very different depending on whether the projects has returned from it's ajax call. The model not updating is the biggest problem, but it looks like it short circuits some initialization if the initial select is empty.

[ProLoser]

If you're not using it the way it's intended to be used, it's hard for me to account for what will happen.

http://en.wikipedia.org/wiki/Race_conditions

[ProLoser]

Have you tried adding an empty <option>?

[daryllstrauss]

On 10/13/2012 07:56 PM, Dean Sofer wrote:

Have you tried adding an empty ||?

—
Reply to this email directly or view it on GitHub
#228 (comment).

Pointing me at the definition of a race condition, really wasn't useful.
It's obvious that it's a race condition, but the fact that angular-ui
isn't correctly initializing when the data arrives after the select2 is
initialized is a bug in angular-ui. The whole point of angular is that
it transparently deals with asynchronous data.

Putting an empty initial option behaves like other placeholders. The
menu starts the width of the placeholder (which is very narrow in this
case). Selecting a project correctly sets the model and resizes the menu
to the size of the projects.

I've got two issues.

The primary one is that the ng-model doesn't update when the data
arrives after the select2 is initialized. That is a bug.

I'd also argue that the select2 should resize in this case. That's a
more minor bug, but inconsistent behavior is generally a bug.

I can work around both of these by putting a place holder in, but it
took quite a bit of time to figure out why the ng-model wasn't updating
like it was supposed to, and putting a placeholder in is a work around
that shouldn't really be required.

[ajoslin]

The ng-model is doing what it's supposed to do: You have it set to undefined, so nothing is selected.

To fix the ng-model, try this:

$scope.allprojects=Project.query({'scope':'all'}, function success() {
  $scope.project = $scope.allprojects[0];
});

To fix the width, could you use CSS? (I've never actually used select2 before)

[daryllstrauss]

On 10/14/2012 07:59 AM, Andy Joslin wrote:

The ng-model is doing what it's supposed to do: You have it set to
undefined, so nothing is selected.

To fix the ng-model, try this:

$scope.allprojects=Project.query({'scope':'all'}, function success() {
$scope.project = $scope.allprojects[0];
});

To fix the width, could you use CSS? (I've never actually used select2
before)

—
Reply to this email directly or view it on GitHub
#228 (comment).

Thanks Andy.

I actually tried both that and initializing the $scope.project prior to
setting $scope.allprojects. Neither solves the problem.

I do expect the $scope.project to be undefined if it is referenced
before I pick an item from the menu. The problem is that it remains
undefined after I pick an item from the menu.

Yes, CSS would be another way to solve the initial width. Like I said,
that's a minor issue, but it really seems like angular-ui is failing to
do some sort of initialization if the data shows up after the select2
has initialized.

[ProLoser]

Create a plunker that reproduces the problem

[ericterpstra]

You might need scope.$apply after your select options have returned from the service. Take a look at this: http://plnkr.co/edit/2t1MwX and see if it helps any. (The timeout is intended to simulate the delay from a service call)

[daryllstrauss]

On 10/15/2012 05:24 PM, ericterpstra wrote:

You might need scope.$apply after your select options have returned
from the service. Take a look at this: http://plnkr.co/edit/2t1MwX and
see if it helps any. (The timeout is intended to simulate the delay
from a service call)

—
Reply to this email directly or view it on GitHub
#228 (comment).

Thanks Eric.

I tried playing with $apply, and if I do it in my service call I get an
error saying a digest is already in progress, which makes sense.

In fact, I've been having a really hard time reproducing the problem in
a plunkr at all. It seems that simulating a network service just isn't
triggering it.

But your plunkr lead me to another thing to test. Doing:

$scope.projects=Project.query({scope:'all'});

causes the problem, but doing:

var tmp=Project.query({scope:'all}, function() {
$scope.projects=tmp;
});

Does not show the problem. It works perfectly.

I'd think those two cases should behave the same, but clearly they're
not acting that way.

It's a nicer work around than a placeholder, but I'm still wondering why
the first case doesn't work.

Does that provide any clues?