I'm working on a form generator implementation, and I want to have ng-options evaluate a property of the current 'field' and return the select 'options' as listed in something like $scope.options.
This means that I can setup the 'option' containing objects in my controller, and have the form elements use the correct object to populate the dropdown.
My form is built from a relational database, so hard coding the target object isn't going to help (although it does work, it's just not scalable)
I'm stuck figuring out how to get ng-options to evaluate an expression which makes the jump from variable to object name.
Maybe there's just a better way to do this altogether?
<select id="{{field.Name}}" ng-model="field.Value"ng-options="option.ID as option.Value for option in [SOMETHING THAT EVALUATES TO AN OBJECT NAMED IN THE BINDING PROPERTY]" ng-required="field.Required"></select>
I have a fiddle here: JSFiddle
I would make an object containing objects of your options
$scope.optiongroups = {group1: [...], group2: [...]}
and then
ng-options="value as option for option in optiongroups[dynamic var here]"
Related
It seems that angular's behavior with respected to the selected attribute has changed back and forth with each major version. So I'm just looking for someone to tell me if this is achievable in the 1.5.x release using ng-options rather than ng-repeat.
What I'm trying to do:
Have angular create html like the following(so that it can be interpreted by a jquery plugin)
<select multiple="multiple"...>
<option value="abc123" label="Justin" selected="selected">Justin</option>
</select>
I've tried many variations of this
<select ms-multi-listbox multiple="multiple" class="multi-select"
id="ym" name="ym" ng-model="groupCtrl.memSelection"
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id">
with no luck.
the model looks like this:
groupCtrl.memSelection =["abc123"];//inbound from api as is selectableMembers
Here is a plunk I've been playing with (try changing the angular version for added confusion): Plunker
Any ideas are welcome.. I mainly wanted to avoid ng-repeat because it has a lot of overhead in longer lists but obviously slow is better than not working so I'll use it until I learn how to do this with ng-options.
Thanks!
edit:
Here is a ng-repeat that achieves the result I want:
<option ng-repeat="mem in groupCtrl.selectableMembers" value="{{mem.id}}" label="{{mem.displayName}}" ng-selected="groupCtrl.memSelection.indexOf(mem.id)>=0">{{mem.displayName}}</option>
enter code here
Be careful when using select as and track by in the same expression. AngularJS API ngOptions
Your expression for ng-options can't work. Using select as and track by in the same expression evaluates mem.id to mem.id.id. Change the expression to
ng-options="mem as mem.displayName for mem in groupCtrl.selectableMembers track by mem.id"
And how you set the selected objects don't look right to me as well. You can not just set the id, you have to set the whole object as selected otherwise your ng-options expression evaluation will also fail. Therefore change your selection to (assuming selectable data is stored in $scope.model as it is in the plunk example).
$scope.memSelection = [$scope.model[0], $scope.model[1]]
I have updated the plunk and it works for single and multi selection.
For more information read AngularJS API ngOptions.
I have a select list using ngOptions and the 'track by' feature like this:
<select validdate="{{date}}" ng-model="code" ng-options="code.description for code in codelist track by code.value">
<option value=""></option>
</select>
The code object has various properties, including a start and enddate which determines the validity of the code. There is a seperate 'date' property which is used to check if the code can be selected or not. For this validdate-directive I need the whole object, therefore I use the track by and cannot use the 'as' to fill the ng-model property.
This works properly, except for the initial null value.
When the validation returns false (and marks the select-box accordingly) and the user then selects the null value, the validation doesn't get reset.
The validator isn't called, even though the ng-model property 'code' changes from an object to a null-value. It seems that because of the track by, it does not trigger the validation directive. Does anyone know a solution for this?
It was a bug in my particular version of Angular, 1.3.8. Upgrading solved it, but for reference this JS Fiddle shows the bug (and changeing the version there solves the bug) http://jsfiddle.net/2tvy2jgh/1/
enter code here
I have a method in my resources object that comes in as:
resources.type
otherstuff: 'more strings'
type:'specifictype'
morestuff: 'morestuff'
The user can change this type with a dropdown / through another call that gets a list of all possible types which looks like resourceList.types which has a list of objects like this json
types:
[
{name:'resourcetype1'},
{name:'resourcetype2'},
etc...
],
my html looks like:
<select ng-model="resources.type" ng-options="name.name for name in resourceList.types">
</select>
The select/drop down box populates with my resourceList.type stuff but when the page loads the ng-model doesn't set to the already selected resource type. It actually selects a blank entry at the top of the drop down when you click. Is angular picky about this? How can I get the ng-model to behave the way I want it to?
I tried messing around with ng-options with the different ways of getting the repeat but I feel like this is more how angular connects the model. Does it just match the string to the ng-options list?
Here's the plnkr as you can see it's not defaulting to type1
http://plnkr.co/edit/NyWACtFQuyndR6CG8lpN?p=info
In Angular, the model is the single source of truth.
This means that if you want a value selected (and bound to your ngModel) you need to assign it to the model:
<select ng-model="resources.type"
ng-options="type.name as type.name for type in resourceList.types">
</select>
$scope.resources = {...};
$scope.resourceList = {
...
types: [
{name: 'resourcetype1'},
{name: 'resourcetype2'},
...
]
};
// Set the model to the desired value
$scope.resources.type = $scope.resourceList.types[0].name;
See, also, this short demo.
You don't have to set your model's value to the reference object in resourceList. In fact, the accepted answer works fine without this line:
$scope.resources.type = $scope.resourceList.types[0].name;
How is it working? Thanks to the "as" notation in the ngOptions. Without the "as", the match is made on the full type element, which is an object, so the match is made on the reference's object, not the name's value.
With the "as" the match is made on the element's property, name.
I've forked the plunker: http://plnkr.co/edit/kORfxGdsWBUlFWHXp6Ry?p=preview
in my case it didnt work since ngOptions was an array of integers and i was trying to set ngModal to string type (2the year 2014).
the solution is simple: parseInt function
I'm assigning an array of 'types' to a dropdown. When a user selects a value in the dropdown, I save it off to a cookie.
The code where I'm updating the ng-model:
$scope.typeItem = $cookieStore.get('typeItem');
This is the dropdown itself:
<select class="transmission-option-width" ng-model="typeItem"
ng-options="t as t.Type for t in transmissionTypes" ng-change="update()"></select>
I set a break point, and $scope.typeItem has a value, but the select is not being set. Any idea what I'm doing wrong here?
The object you're getting back from the cookie store...
$scope.typeItem = $cookieStore.get('typeItem');
while it might have the same properties as one of the items in $scope.transmissionTypes, it's actually an entirely different object. Because angular does the comparison by reference, it can't find a matching object in $scope.transmissionTypes and the dropdown is not set.
Is t.Type a numeric value? That might prevent angular from treating the selected value as equal to the option value.
Might be easiest to convert $scope.typeItem to a numeric value after getting it from the $cookieStore.
i think you misted this part of the docs
Note: ngModel compares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle.
try to traverse your array and assign the element in the array holding the same value to your model variable
In Angular 1.2.11, given a controller with:
$scope.produce = { 'apples' : [{ 'variety' : 'granny smith', 'price': 2.00}] }
And a view with
<select ng-model='fruits'>
<option value="0">More Fruits...</option>
<option ng-repeat="p.apple for p in produce" value="p">{{ p.variety }}</option>
</select>
How can I bind 'p' to the value attribute? If I try as above the model is bound as a JSON string, not as the model itself (as it would be if I were able to use ng-options).
I'm working around this now by using an ng-change function that uses the value bound to fruits as a lookup in $scope.produce, but this seems like a workaround rather than a solution.
EDIT: Sorry I wasn't more clear about this: I need to be able to hard code 1+ options into the select list, so using ng-options is not a solution.
Here are some fiddles to help illustrate my problem:
** Using ng-options **
ng-options allows for one element that it uses for creating a default option for use as a label. Two problems with this: if I try to use that <option> for its intended purpose I can't add a second option to the select. On the other hand, if I just try to add one <option> element, it gets placed at the top of the <select> list. No good.
** Using ng-repeat **
I'm unable to bind the model to the value attribute of the <option> element. Instead, the value is stringified JSON, which is not bindable.
You need to use ng-options:
<select ng-model='fruits' ng-options="thisFruit.variety in apples">
</select>
If you need to have an option selected as a default (your "More Fruits" option) then you need to add that to the data before it gets to the repeater, and also set your model $scope.fruits = 0 to make that selection selected by default.