Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Selected option not always shown when binding to a model's property #150

Closed
lowerends opened this issue Aug 8, 2014 · 6 comments
Closed
Milestone

Comments

@lowerends
Copy link

When not using a model's property to bind to, the selected option remains visible even when the options list does not include that option anymore (for example due to partial loading of the options via AJAX). The code is then like this:

<ui-select ng-model="captain.selected">
     <ui-select-match placeholder="Select captain">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="captain in captains | propsFilter: {name: $select.search}" refresh="refreshCaptains($select.search)" refresh-delay="0">
        <div ng-bind-html="''+captain.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

However, when using a model's property for the binding, then the selected option is no longer displayed (a thin empty rectangle is shown instead of the normal, higher rectangle showing the name) when the option is no longer in the options list. The code then looks like this:

<ui-select ng-model="boat.captain_id">
     <ui-select-match placeholder="Select captain">{{$select.selected.name}}</ui-select-match>
     <ui-select-choices repeat="captain.id as captain in captains | propsFilter: {name: $select.search}" refresh="refreshCaptains($select.search)" refresh-delay="0">
        <div ng-bind-html="''+captain.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

I don't understand where the difference comes from and if it can be avoided, so that the selected option is always shown, even when it is not available in the options list (like in the first example). I'm willing to assist with a PR, but then I'd first need to understand where the problem comes from.

@dimirc
Copy link
Contributor

dimirc commented Aug 11, 2014

Tell me if I understand you correctly:

  1. I type "Phillips" and get results (ajax)
  2. Select Cap. Phillips
  3. I try searching again on same element for any other name but never actually select anything
  4. Now I should see the problem

Is that the case?
Also can you paste some screenshot of what you mean with "a thin empty rectangle is shown instead of the normal, higher rectangle showing the name"?

If you can put a plunker together will be good to try fixing faster.

@lowerends
Copy link
Author

Ok, I'll create a plunker that reproduces the use case.

@dimirc dimirc mentioned this issue Aug 20, 2014
16 tasks
@dimirc dimirc added this to the 0.7.x milestone Sep 4, 2014
@dimirc
Copy link
Contributor

dimirc commented Sep 8, 2014

@lowerends this problem will be gone with 785c6a4 that is on a PR that should be merge very soon

@dimirc dimirc closed this as completed Sep 8, 2014
@dimirc
Copy link
Contributor

dimirc commented Sep 8, 2014

Merged

@lowerends
Copy link
Author

Great, I'll test this as soon as I get the chance. Thanks!

@lowerends
Copy link
Author

Looks like this is working wonderfully well with the latest release. Thanks again.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants