This is my HTML code
<select id="drplist" ng-model="node.field.name" data-nodrag class="form-control" ng-change="currentColumnInfo(node.field.name,Item.Type,formname)">
<optgroup label="{{primaryObjectName}}">
<option ng-repeat="Item in columnsList" value="{{Item.name}}" id="{{Item.name}}" ng-selected="true">{{Item.name}}</option>
</optgroup>
<optgroup label="{{object.formName}}" ng-repeat="object in secondaryObjectList">
<option ng-repeat="Item in object.fields" value="{{Item.name}}" id="{{Item.name}}">{{Item.name}}</option>
</optgroup>
</select>
I am getting node.field.name, item.Type, and formname as undefined when this ng-change function ng-change="currentColumnInfo(node.field.name,Item.Type,formname)" fires; can anybody help me?
You can't reference Item outside of the ng-repeat loop.
I think what you need to do is transform your data structure for columnsList and object.fields into one data structure, and use the label group by group for (key, value) in object expression for ng-options
Related
I have this select and the values are displayed correct but how to I get the value of the selected option in my function FilterByBrand()?
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="{{x.opt_Brand.Id}}">{{x.opt_Brand.Name}}</option>
</select>
You don't use curly braces (interpolation) inside the ng-value. Check this answer for a great summary of when not to use interpolation - https://stackoverflow.com/a/50419144/5867572
<select ng-model="selectedBrand" ng-change="FilterByBrand()">
<option ng-value="-1">--Alle Brands--</option>
<option ng-repeat="x in Brands" ng-value="x.opt_Brand.Id">{{x.opt_Brand.Name}}</option>
</select>
I for the life of me cannot figure out how to set both the labal and the value of a select using an array
I have an array of countries
$scope.countries = [
{abbr:"US", name:"United States"},
{abbr:"CA", name:"Canada"},......
]
I want the select to generate as such
<select>
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
However the closest I have been able to achieve is
<select>
<option value="1">United States</option>
<option value="2">Canada</option>
</select>
I've achieved that using
<select class="form-control" ng-options="country.Name for country in countries" ng-model="selectedCountry">
How do I assign the label AND the value using ng-options?
Without testing I think it's just
ng-options="country.abbr as country.name for country in countries"
For exact structure, you need to do ng-repeat through your <option><option> ng-options will never set the value which which you want, It will always set 0,1,2,3 etc.
HTML
<select ng-model="selectedCountry">
<option ng-repeat="country in countries" value="{{country.abbr}}" ng-bind="country.name"></option>
</select>
JSFiddle
Hope this could help you, Thanks.
I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.
<select ng-model="item.value" ng-options="item.name for item in items">
</select>
The above will populate select option in AngularJS, but how can I add selected if my condition is met?
I want to do something like this:
<select ng-model="item.value" ng-options="item.name for item in items" if="item.name == someValueToCheckAgainst" selected endif>
</select>
Obviously the above is wrong, but I was trying to search for this to see if it is possible to do.
This is items
var items = [ 'a', 'b', 'c' ];
var someValueToCheckAgainst = 'b';
so my menu should be like this
<select ng-model="item.value">
<option value="a">a</option>
<option value="b" selected>a</option>
<option value="c">a</option>
</select>
Just figured this out
<select ng-model="form.model">
<option ng-selected="{{item == valueToCheckAgainst}}"
ng-repeat="item in items"
value="{{item}}">
{{item}}
</option>
</select>
For me this statement makes no sense.
<select ng-model="item.value" ng-options="item.name for item in items"> </select>
ng-model is current value (bound model). If your 'item' looks like ’{ value, name }' than you should define your 'select' as
<select ng-model="someValueToCheckAgainst" ng-options="item.value as item.name for item in items"> </select>
The selected option is defined by the value of the ng-model attribute. For further information you can take a look at the official documentation https://docs.angularjs.org/api/ng/directive/select.
I recommend to use ng-option directive instead of ng-repeat for select boxes, beacuse ng-option is specifically created for select box and handles options in best way. And how we can set a default or conditional option value selected in ng-option directive is using ng-init directive with it like this:
<select ng-model="item.value"
ng-options="item.name for item in items"
ng-init="condition ? item.value = items[opt index] : item.value = items[0]">
</select>
I have the following object:
[
{"id":"150c67d4-952b-45b0-b287-f651a5f6d82b","name":"xx"},
{"id":"9001f011-3a0c-4d45-a0fb-eabb4c83ff83","name":"yy"},
{"id":"9b8b93af-cfef-451a-8dda-7373d9154f60","name":"zz"}
]
Here's my HTML:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus">
<option style="display: none" value="">Select User</option>
</select>
The result is:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus"
><option style="display: none" value="" class="">Select User</option>
<option value="0" selected="selected">*</option>
<option value="1">xx</option>
<option value="2">yy</option>
<option value="3">zz</option></select>
How can I make this so that the values stored are the actual id's ?
When you are using the ng-option to generate the option list, you don't have control over the values generated for options. For an array it is the index into the array.
If you want to have specific value in the option field, you have to use ng-repeat for it.
In any case, you should not be very concern about specific of html generated, angular can update model correctly in any case.