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>
Related
Guys after I used the angular directive ng-options I got this result
<select name="users" id="users" ng-options="user.id as user.name for user in users" ng-model="user">
<option value="number:1" label="Developers">Ahmed</option>
<option value="number:2" label="Designers">Jon</option>
<option value="number:3" label="HR">Astm</option>
<option value="number:4" label="Doctor">Fady</option>
</select>
<select name="colors" id="colors" ng-options="color.code as color.name for color in colors" ng-model="color">
<option value="string:ff0000" label="Developers">Red</option>
<option value="string:ffffff" label="Designers">White</option>
<option value="string:000000" label="HR">Black</option>
</select>
why the option value contains the data type such as number:1 or string:ffffff ??
how I can remove the data type from it and keeping only the value ?
Add track by [id] at the end of ng-options.
In your case it would be:
ng-options="user.id as user.name for user in users track by user.id"
and
ng-options="color.code as color.name for color in colors track by color.code"
Right now there is not option in angular to remove that type. If you need that, use custom directive with ng-option as parent.
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
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 am using a angular to populate an selectInput, but i want to use a "Custom" values in the option value
My current output
<select ng-change="getModels(selected.id)" ng-model="selected" ng-options="category.name for category in categories">
<option value="0">red</option>
<option value="1">green</option>
<option value="2">yellow</option>
</select>
My Json
$scope.categories = [
{id:1000, name:red}
{id:2000, name:green}
{id:3000, name:yellow}
}
and i want this output:
<select>
<option value="1000">red</option>
<option value="2000">green</option>
<option value="3000">yellow</option>
</select>
You can use track by expression like this:
<select
ng-options="category.id as category.name for category in categories track by category.id"
ng-model="selected">
</select>
Please see this jFiddle.
Here is a snippet. Q2 is selected as I expect.
<select name="quarter" ng-model="Quarter" >
<option value="1" >Q1</option>
<option value="2" ng-selected="Quarter=='Q1'">Q2</option>
<option value="3">Q3</option>
<option value="4">4</option>
</select>
Changing 'Q1' to 'Q2' makes nothing as selected as I expect. Now putting ng-selected="Quarter=='Q1'" DOES NOT make Q1 selected until i delete ng-selected="Quarter=='Q2"
wtf. How is this suppose to work?
If you put the ng-selected on the option element, your option will be selected when the ng-selected value is true. In your case, the option Q2 is selected when Quarter is equal to Q1.
If you want to select the value passed in Quarter, you must put the ng-selected on the select element :
<select name="quarter" ng-model="Quarter" ng-selected="Quarter"
ng-options="Quarter for Quarter in Quarters" >
{{Quarter}}
</select>
Take a look at the select directive documentation.
<select ng-model="hour">
<option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option>
</select>
if you want a select for 24 hour, you can do this.
like this:
<body ng-controller="MainCtrl">
{{referenceNumber}}
<select ng-model="referenceNumber">
<option ng-selected="!referenceNumber">Default</option>
<option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option>
</select>
</body>
"I believe one of the main reasons for ngSelected is to set default
values depending upon if the model is not set correctly." joshkurz commented on Mar 3, 2014
So the right way would be to rely on ng-model only in you case.
The right way to do what you are trying to do(pre select a option) is like this:
<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select>
Reference:
http://plnkr.co/edit/xXq3b40nvqkjPlyCxZNG?p=preview
https://github.com/angular/angular.js/issues/6528
The ng-selected directive takes a boolean value or an expression which leads to a true/false boolean result.
You just need to pass its value true to make it work or an expression which leads to true.
It has nothing to do with ng-model of <select> tag.
Following is an example of this behaviour:
<select name="quarter" ng-model="Quarter" >
<option value="1" >Q1</option>
<option value="2" ng-selected="true">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
This will make option Q2 selected by default.