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
Related
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
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
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}}"
I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller
Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.
You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
I'm currently having a problem with selecting drop downs which are not working correctly with angularjs. Couldn't find anything that relates to my problem. It seems odd.
I am a newbie to angularjs so please forgive my ignorance
I am currently trying to retrofit angularjs onto my MVC5 application.
Here are the issues;
When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option
Once you change the selected option on the drop-down, selected the object in scope is now empty?
Here is the code
The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:
ng-options="o.text for o in options"
You should change your
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
to
<select ng-model="selected" ng-options="o as o.text for o in options"></select>
to make it work as you expected.
because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.
<div>
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
<br />Code: {{ selected.code }}
<br />Text: {{ selected.text }}
</div>
Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".