Angular using ngTemplateOutlet for a custom select dropdown - javascript

I'm trying to create a custom select dropdown component that can be easily implemented by other devs in the following way:
<ui-select placeholder="select an option" label="Select">
<ui-select-option *ngFor="let option of options" [id]="option">
<!-- any custom content to display for the option -->
</ui-select-option>
</ui-select>
I am using #ContentChildren along with ngTemplateOutlet to project each option into the options list (this allows me to wrap each option in a list item which can handle click events/selected css state etc.).
This is all working fine, however when I select an option, I want the template from the selected option to populate in the select input box. When I do this, the option magically disappears from the list.
I've created a minimal reproduction on stackblitz (https://stackblitz.com/edit/angular-ackvfp).
I've found a way that works with structural directives (https://stackblitz.com/edit/templateref-to-multiple-outlets), however I was hoping to avoid this, since to loop a bunch of options and render them would require an additional ng-container for the loop, since only one directive can exist on each component (would end up looking like the below):
<ui-select placeholder="select an option" label="Select">
<ng-container *ngFor="let option of options">
<ui-select-option *myValue="option">
<!-- any custom content to display for the option -->
</ui-select-option>
</ng-container>
</ui-select>
(EDIT): I posed the same question direct to the angular team and they've done a good job of explaining the issue: Using ngTemplateOutlet for a custom select dropdown

Related

How to dynamically change the choices of ui select in angularjs

I have a couple of UI Selects, based on the selection of the first one I want to load the choices into the second one. How do I go about doing it dynamically for the second one. I did do some extensive searching but could not find anything.
<ui-select append-to-body="true"
ng-model="requirementChoice" theme="bootstrap"
ng-disabled="disabled" close-on-select="true"
title="choose a requirement"
theme="selectize"
name="requirements" id="requirements">
<ui-select-match placeholder="
{{translations.SLA_CHOOSE_REQUIREMENTS}}">
{{requirementChoice}}
</ui-select-match>
<ui-select-choices repeat="choice in requirementTypes |
filter:$select.search">
{{choice}}
</ui-select-choices>
</ui-select>
This is the first of my ui select which has the choices and based on these choices I want to load the data into the second UI select is there a way to achieve this?
Call a function on-select of the first ui-select and set the second ui-select accordingly in that function.
Refer this https://github.com/angular-ui/ui-select/wiki/ui-select

Search functionality using multiple select option - angularjs

Now I am working in an search functionality module using angularjs, search functionality is implemented by multiple select options, user can select more than one option in select tag, it's not a problem, but I am facing issue to load the saved search details into the select tag,(have to show pre-selected search data into the select tag)
<select name="" ng-model="sex" multiple ng-options="sex.name as sex.name for sex in choosesex">
</select>
which displays the list like Male and Female like below,
$scope.choosesex = [{ID:1,name:"Male"},
{ID:2,name:"Female"}];
I have get the json response from saved search, while pushing the result into the ng-model it doesnot show the selected option in select tag, Please share your opinions regarding this issue to fix. Thanks in advance.
sex.name as sex.name is not right. Try this:
<select name="" ng-model="sex" multiple ng-options="sex as sex.name for sex in choosesex"></select>

AngularJs ng-controller overrides

I am newbie with AngularJS, I really need some help here.
I have JSBIN working example that displays two charts with different data.
For each chart I have different ng-controller. By issue is my select dropdown only works with <div ng-controller="first"> chart.
My goals is to update both charts with select dropdown menu.
If you check clearly,
The $scope.filterOptions which is used in dropdown is defined in first controller. It is available in second because it is nested controller
<select ng-model="selectedyear" ng-change="sampleDropDown()">
<option ng-repeat="year infilterOptions.stores| unique: 'year'">
{{ year.year }}
</option>
</select>

Angular select model not setting value

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"

How can preselect value in angular ui select editing

I am using angular schema form anf use ui select to populate options.
Now i am binding my object with id of the choices. Here is the template
<ui-select
ng-model="$select.selected"
theme="bootstrap"
ng-disabled="disabled"
on-select="$$value$$=$select.selected.id"
>
<ui-select-match placeholder="Please Select ">{{$select.selected.display}}</ui-select-match>
<ui-select-choices repeat="a in choices">
<div ng-bind-html="a.display"> {{ a.display }}</div>
</ui-select-choices>
</ui-select>
I wasn't ben able to bind my $$value$$ to id of the selected object.
so for hack i added this
on-select="$$value$$=$select.selected.id"
$$value$$ represents the model.myobject so on select i am manually binding id to that property.
For new object this works fine.
But when i need to edit object then that option is not preselected.
Any ideas how can i do that
There is a addon for ui select for schema form and i got idea from it.
But i could not fully understood it
https://github.com/chengz/schema-form-uiselect/blob/master/src/single.html

Categories

Resources