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.
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>
First two lines are from js file where value is fetching through id.
var activity = document.getElementById("bactivity").value;
var activity1 = activity.options[activity.selectedIndex].value;
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
the above code is from html file where I am displaying data in form of dropdown and when I am selecting any value it generate error that option is invalid. Some tell what was my mistake there so I can make it correct.
Herre you can find the working code, you just had to take the elements not their value (first 2 lines of code):
var activity = document.getElementById("bactivity");
var activity1 = activity.options[activity.selectedIndex];
<select style="font-size:15px" ng-model="activity" value="Enter activity" id="bactivity">
<option selected>select</option>
<option value="Fitness">Fitness</option>
<option value="Aerobics">Aerobics</option>
<option value="Dance">Dance</option>
<option value="Martial arts">Martial arts</option>
<option value="Boxing">Boxing</option>
<option value="Athletics">Athletics</option>
</select>
I have a drop down which contains the following values
<select class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
Because of this in drop-down the value is always selected to "Critical"
In my scope i have defined the values of severity per drop-down. How do i select that ?
For example say the value is "High". How do i set the default value to high and not critical
You'll need to define at object within your scope and bind it to the ng-model of your select.
Script
$scope.form = {
"severity": "high"
};
HTML
<select class="form-control" ng-model="form.severity">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
There are a couple of ways to select an option with angular:
1- Bind it to a model and set the model:
<select class="form-control" ng-model="myValue">
And
$scope.myValue = 'medium';
2- You can set it in a directive by jQuery or JS:
$("#yourselectid").val('low');
<div class="field-wrap">
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" >
<option value="">Select State</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Orissa">Orissa</option>
<option value="Pondicherry">Pondicherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Uttaranchal">Uttaranchal</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="West Bengal">West Bengal</option>
</select>
</div>
this is the select menu i am using i want to fetch the selected value in my controller but don't know how to do that, I already fetched the value for textbox but have no idea about the select box.
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
var data = {
firstname : $scope.signup_form.firstname.$modelValue,
lastname : $scope.signup_form.lastname.$modelValue,
email : $scope.signup_form.email.$modelValue,
mobileNumber : $scope.signup_form.mobileNumber.$modelValue,
district : $scope.signup_form.district.$modelValue,
state : $scope.signup_form.state.$modelValue,
course : $scope.signup_form.course.$modelValue,
collegeName : $scope.signup_form.collegeName.$modelValue,
};
This is my controller, I think I have to use ng-option but not sure.
Thanks
In your case $scope.signup.state will have value of selected state.
The value of selected option is saved into model assigned to dropdown
I'd suggest adding an array of options in your Controller instead of hardcoding it in the HTML and then use the ng-options directive to display the options from that array, you'd end up with something like:
<select name=courses class="input-field1" name="state" title="state" ng-model="signup.state" ng-options="option in options">
(where options is an array of options declared inside your controller
$scope.options = ['option1', 'option2'];
Then you can simply bind that input to an ng-model and use it regularly from the controller
$scope.signup.state
will give you access to whatever option is selected
You can use ng-change here. When ever an option is selected from the drop down then this method will be fired and we can persist the selected option data.
html
<div>
<select ng-model="selState" ng-change="selectedState(selState)"
data-ng-options="state as state.name for state in states">
<option value="">Select Account</option>
</select>
{{selectedState}}
</div>
script.js
myApp.controller('Ctrl', function($scope) {
$scope.states=[
{name:"AP"},
{name:"Karnataka"},
{name:"Tamilnadu"}
];
$scope.selectedState = function(item) {
alert(item.name);
};
Working Plunker
I'm struggling to understand to documentation for ngOptions
I have a simple array : ['code1' , 'code2'] and I just want to iterate over and construct option value and label as follow :
What I expect :
<select>
<option value="" class="">All</option>
<option value="code1">code1.label</option>
<option value="code2">code2.label</option>
</select>
What I've tried :
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2']">
<option value="">All</option>
</select>
What I get :
<select>
<option value="" class="">All</option>
<option value="0">code1.label</option>
<option value="1">code2.label</option>
</select>
See that values aren't what I want .. I tested almost all possible syntax of the documentation without success.
ps: I've simplified the code, but I use angular-translate to translate the received code and put that translation in the option label.
JsFiddle : http://jsfiddle.net/3ekAj/
I'm guessing what you want is:
<select ng-model="select" ng-options="option + '.label' for option in ['code1', 'code2'] track by option">
<option value="">All</option>
</select>
Fiddle: jsfiddle