How to dynamically change the choices of ui select in angularjs - javascript

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

Related

Angular using ngTemplateOutlet for a custom select dropdown

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

angularjs ng options not jumping to option on letter press

I have a list of objects and using them for ng-options on a select element.
<select class="form-control"
ng-model="$ctrl.selectedTimeZone"
name="selectedTimeZone"
ng-options="option as option.description for option in $ctrl.timeZoneOptions
| orderBy: 'description' track by option.name"
required>
</select>
When a user focuses on the select element and types a letter, i want the first option that matches the letter (normal behavior in normal select elements).
How can i get that functionality back using angularjs ng-options?

ui-select angular need a selectable option with null value

I'm using ui-select angular. I need an option with null value to be selected. Googled it but can't find solutions that fits.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ui-select allow-clear ng-model="hotelsCtrl.companySelectedInsert" theme="bootstrap">
<ui-select-match placeholder="Select or search company in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="company in hotelsCtrl.companies | filter: $select.search">
<span ng-bind-html="company.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
having this
The straight forward way is to add and element with null value in hotelsCtrl.companies before setting it to ui-select.
something like this:
{
name:'none',
value:null
}
maybe if you want just to reset once the one of the options are selected then use backspace
here is a working example, check this out http://jsfiddle.net/Miqe/x6bqubtw

Angularjs two form for the same controller

I have a problem with angularjs code. I have a roles select replicated in two modal: create user and change role.
This select is filled with http call in this way:
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required>
<ui-select-match placeholder="Select role">
{{$select.selected.role}}
</ui-select-match>
<ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span>
</ui-select-choices>
</ui-select>
and in angular I have:
$http({
method: 'GET',
url: 'roles'
}).then(function successCallback(response) {
$scope.roles = response.data.result;
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
So I put the HTML code inside form in two modal.
In the first, create user, all works fine, in the second I can't use a different data-ng-model because otherwise I receive undifined element. For example I have this:
<form novalidate class="simple-form" name="newRoleForm">
<!-- form start -->
<div class="box-body">
<div class="form-group">
<label>New role</label>
<!-- <ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newRole.role" required> <ui-select-match
placeholder="Select new role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select> -->
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newUser.role" required> <ui-select-match
placeholder="Select role">
{{$select.selected.role}}</ui-select-match> <ui-select-choices
repeat="role.idRole as role in (roles | filter: $select.search) track by role.role">
<span data-ng-bind="role.role"></span> </ui-select-choices> </ui-select>
</div>
</div>
</form>
If I use commented code I don't receive in my javascript the role value, if I use the uncommented code it works because newUser is used in the other modal.
I could use this actual code, but I would like to understand why it works and the other no.
Furthermore when I open the second modal I see the value setted in the first.
Do you know why?
Its a little tricky to get a perfect overview but I think I'll try to answer few of your questions:
Why doesn't newRole.role work when newUser.role does?
Basically you answered this yourself from what I can tell. You need to define the object somewhere in your scope before starting to bind properties to it. Ie a simple $scope.newRole = {} in your controller might fix this error.
Value from the first modal is set in the second one?
I'm not sure about this as I cant see this second modal (?). But if you reuse the same code in the same scope you will bind data to the same newUser object. Hence getting the same values each time.
I hope this helped in some way

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