ui-select
ui-select copied to clipboard
angular-ui
Proposal: adding static choices
There are cases where we might need to show some static info at the dropdown. We could add a new directive ui-select-static-choice and I was thinking of something like this:
<ui-select ng-model="person.selected">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
</ui-select-choices>
<ui-select-static-choice ng-if="!$select.items.length">
No results for <b>{{$select.search}}</b>
</ui-select-choices-static>
<ui-select-static-choice ng-if="$select.items.length<10">
<button ng-click="fetchFromServer($select.search)">Search more results on server</button>
</ui-select-choices-static>
</ui-select>
It'd be really nice to specify if the ui-select-static-choice could appear above or below the search box, or tied to the bottom of the popup.
@arkarkark maybe we could have a something like this:
<ui-select-static-choice anchor='bottom'>
<button ng-click="openCreateNewWindow()">Create New</button>
</ui-select-choices-static>
I don't know why, or exactly how the logic works now, but I sort of imagined something way less complicated:
<ui-select ...>
...
<!-- this doesn't have to be ul+li, could be whatever DOM you wanted -->
<ul ui-select-choices ...>
<li ng-click="...">Static 1</li>
<li ng-click="...">Static 2</li>
<li ng-click="..." ng-repeat="...">...</li>
<li ng-click="...">Static 3</li>
</ul>
</ui-select>
I realize this may not be feasible based on the current design but this is essentially what I think about when I imagine static options mixed with virtual options. I am not a huge fan of creating more directives/attributes/options just for weird edgecases vs just making the level of control when templating much more powerful.
@ProLoser I agree that more directives isn't something that I like neither. I'm only worried that if we change the functionality of ui-select-choices it will cause a big breaking change (also maybe this is the best time to introduce them).
Other alternative could be to leave the current implementation as a shortcut way (like other shortcuts proposed on https://github.com/angular-ui/ui-select/issues/106) and if user needs more flexibility, then they can use this other syntax with a child
@dimirc I like your anchor="" choice.
I see three options
above_search below_search bottom
once position: sticky is more supported, perhaps having those interleaved with the options would be really nice.
https://youtu.be/O91_wFBR9bA
while I'm wishing for a pony, having the static option scroll off when you scroll up (for position below_search or bottom), but then appear right away if you scroll down a bit (like the chrome url bar in android chrome (I think it's called quick return (like in this video: https://youtu.be/Qf8BgjfV3WU))
Sorry but that exact level of convolution is what I would prefer to avoid. But I'm not the maintainer so it's only an opinion and the decision is up to you. I prefer using the dom structure for position and if you want fancy floating then add classes and customize the css in a separate file so you can keep updating the plugin.
@arkarkark @ProLoser What do you think of the alternative I wrote on the previous comment:
Other alternative could be to leave the current implementation as a shortcut way (like other shortcuts proposed on #106) and if user needs more flexibility, then they can use this other syntax with a child declaration.
Basically we can still work the same way we are right now BUT if the user needs more flexibility then just add the repeat on a child element, to make it clear, these will be both valid:
Valid way 1
<ui-select ng-model="person.selected">
<ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | filter:$select.search">
{{person.name}}
</ui-select-choices>
</ui-select>
Keeping support for this alternative, we have a smaller syntax on simple cases and also avoid introducing a breaking change.
Valid way 2
<ui-select ng-model="person.selected">
<ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices>
<li repeat="person in people | filter:$select.search">{{person.name}}</li>
<li>Static</li>
</ui-select-choices>
</ui-select>
I agree with the confusion with the stuff I was asking for.
the valid-way2 doesn't appear to support having something fixed in the window and not scrolling. I guess it'd be upto me to try and hack that up with position: fixed and some margins?
@arkarkark
<ui-select ng-model="person.selected">
<ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices>
<li class="top">Sticky top</li>
<li repeat="person in people | filter:$select.search">{{person.name}}</li>
<li class="bottom">Sticky bottom</li>
</ui-select-choices>
</ui-select>
.ul-select-choices {
position: relative;
padding: 30px 0;
}
.top, .bottom {
position: absolute;
left: 0;
right: 0;
}
.top { top: 0; }
.bottom { bottom: 0; }
This would be really nice. Is there a current workaround to make this happen? @dimirc: is there a workaround for this that's possible now?
Another way to ask this: is there ANY way to add static choices right now?
I know this is way late but just saw your videos and I want to point out to people that I really don't advocate using this on mobile. Especially in the way you illustrated.
Hi! It would be great to have such feature! Are there any valid ways to make a static element now?
The only way that I've found to do this is to add a static choice to your data, and then just remove it when you're processing it for saving. Not ideal, but it does work...
@dmackerman Thanks, that is what I'm doing now, but it could be good that pure static or mixed styles can be supported by the module.
After I finish with a refactor i'm working at https://github.com/angular-ui/ui-select/pull/731 , i'll start working on this issue
I hope it will be possible to use only static entries too, like
<ui-select ng-model="light.selected">
<ui-select-match placeholder="Select a light color...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices>
<li class="top">Red</li>
<li class="top">Yellow</li>
<li class="top">Green</li>
</ui-select-choices>
</ui-select>
