I am using html dropdown and binded the values from angularjs funtion, the values like below
function getStates() {
return [
{
"name": "Alabama",
"abbreviation": "AL"
},
{
"name": "Alaska",
"abbreviation": "AK"
}];
}
and my dropdown is
<select class="form-control"
ng-model="user.state" name="state"
ng-options="item.name for item in states track by item.abbreviation">
<option value="">-- choose State --</option>
</select>
In my scope variable user.state i got an abbreviation value which is preloaded by some function, based on that abbreviation value the selected value of dropdown should be shown in the html page.
valuable comments are welcome...
You need the correct ngOptions syntax value as text for item in collection
ng-options="item.abbreviation as item.name for item in states"
Related
i populate drop down this way and data is coming but no data has been selected when dropdown shown first time. here is my code. please have a look and tell me where i made the mistake.
<div ng-controller="DemoCtrl" ng-app="main">
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="item.countryId">
{{item.countryId}}-{{item.name}}
</option>
</select>
<span>Selected country id is {{selectedCountry.countryId}}</span>
</div>
var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {
$scope.chooseCountries=[
{countryId : 1, name : "France - Mainland", desc: "some description" },
{countryId : 2, name : "Gibraltar", desc: "some description"},
{countryId : 3, name : "Malta", desc: "some description"}
];
$scope.selectedCountry = $scope.chooseCountries[0].countryId;
});
More better way to go for it would be using ng-options directive.
<select ng-model="selectedCountry"
ng-options="country.countryId as (country.name+'-'+country.desc) for country in chooseCountries">
</select>
Demo here
Why ng-repeat approach wouldn't work?(Just for explanation, not recommending to use)
You should fill option value attribute with countryId correctly like value="{{item.countryId}}"
<select ng-model="selectedCountry">
<option value="">Select Account</option>
<option ng-repeat="item in chooseCountries" value="{{item.countryId}}">
{{item.countryId}}-{{item.name}}
</option>
</select>
But above will not work for your case because you had countryId field is in number format, when option assign that value to value attribute it gets converted to string format. So on initial load you wouldn't see countryId gets binded to select box. comparison will occur like 2==="2" wouldn't be true, so select box would not select value, even if you provided in ng-model.
You can find the problem plunkr here
So for fixing it you need to convert that number value to string value by calling toString method over it like below
$scope.selectedCountry = $scope.chooseCountries[0].countryId.toString();
By doing above change select box does select provided countryId value in dropdown because of comparison occurs true "2"==="2"
That's why using ng-options would be better, which does preserve value datatype. Basically they worked without harm the datatypes of value.
http://plnkr.co/edit/evQJAKvMnl4btz4BZeuP?p=preview
<select ng-options="country as country.countryId+ ' (' + country.name + ')' for country in chooseCountries ng-model="selectedCountry "></select>
refer:https://docs.angularjs.org/api/ng/directive/ngOptions
You should use ng-options as follows
<select ng-model="selectedCountry" ng-options="country.countryId as country.name for country in chooseCountries"></select>
I'm getting blank data while loading JSON data into Dropdown using Angular ng-options.
My JSON Values
"tagFormat": {
"displayText": "Tag Format",
"options": [{
"value": "js",
"name": "JS"
}, {
"value": "vast",
"name": "VAST"
}]
},
HTML View
<div class="select_padding">
<select class="form-control" ng-options="otf.value as otf.name for otf in details.tagFormat.options">
<option>Select Tag Format</option>
</select>
</div>
here details is my scope variable.
how to get these data and also next time I need to use selected value. so Do I need to bind with ng-model ?
Thanks
Here is the working code:
<select class="form-control" ng-options="item as item.name for item in details.tagFormat.options track by item.value" ng-model="selected">
<option value="">Select Tag Format</option>
</select>
In $scope.selected you read the selected item.
Check this example on Codepen: http://codepen.io/beaver71/pen/Vexwmr
I am having an issue with using ng-repeat and select.
Here is my code, first of all
<select>
<optgoup ng-repeat="(key, value) in Widget.ids" label="{{ value.label }}">
<option ng-repeat="id in Widget.ids[key].ids">{{ id }}</option>
</optgroup>
</select>
My data looks something like this
[
{ label: "My Label", ids: [ "one id", "another id" ] },
{ label: "My Other Label", ids: [ "one id", "another id" ] }
]
However, this returns a completely empty <select>.
What's frustrating, is if I change my HTML to look like this:
<div ng-repeat="(key, value) in Widget.ids">{{ value.label }}
<div ng-repeat="id in Widget.ids[key].ids">{{ id }}</div>
</div>
Then it lists..
My label
one id
another id
My Other Label
one id
another id
In fact if I remove the <select> tag and leave the optgroup etc tags then it will actually generate the correct DOM elements.
Also, I can't use simply use ng-model as I will be reserving that for a different model. (Widget.my.path.widget_id)
What's going on here then?
This plunker should work:
<select>
<optgroup ng-repeat="(key,value) in data" label="{{value.label}}">
<option ng-repeat="id in value.ids">{{id}}</option>
</optgroup>
</select>
I use an array structered like this:
[
{"name": "Afghanistan", "code": "AF"},
{"name": "Åland Islands", "code": "AX"},
{"name": "Albania", "code": "AL"},
{"name": "Algeria", "code": "DZ"},...
To load a select with ng-options:
<select class="form-control" id="country" ng-model="val" ng-options="country.name for country in countryList">
</select>
Indeed the select display the list of the countries by name.
I want the list to select an option by the country code and not by the object {name ... code..} as it works now. How could I do that?
Thanks
check the DOC for for ng-options,
it says,
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)
so you need to modify your code as below,
<select class="form-control" id="country" ng-model="val" ng-options="country.code as country.name for country in countryList">
here ng-options="country.code as country.name for country in countryList"
countryList - is the data source.
country - is the single item in the countryList.
country.name - is the name property of the country this is the label in option.
country.code - is the selected value in the select box.
here is the Demo Plunker
You can select by code by following code,
<select id="country" ng-model="val" ng-options="country.code as country.name for country in countryList"></select>
and if you want the whole selected object, which you may want to process for other reasons
<select id="country" ng-model="mySelectedCountry" ng-options="country as country.name for country in countryList">"></select>
I need to bind complex objects via a select box.
I'm aware of ng-options, but I cannot use template expression in ng-options. I would need to add field with the displaytext to every object in my controller like in this fiddle. That would mean I would need to change logic/code for the presentation. This is a bad seperation of concerns.
Is there any way to bind complex objects with a select box not using ng-options? I need to write the displaytext declarative in the template like there:
<select name="myObject" ng-model="myObject.sub">
<option ng-selected="!myObject.sub.id"></option>
<option value="" translate="myObject.sub.self" ng-selected="myObject.sub.id == -1">
<option ng-repeat="option in subselect.data" value="{{option}}" ng-selected="option.id == myObject.sub.id">
{{option.id}} {{option.shortName}} {{ option.comment }}
</option>
</select>
currently this is binding the string [object Object], because of the interpolation in the value attribute.
Using a small helper function with ng-change you can capture the index of the selected item to obtain the full object.
HTML
<label ng-controller="CompanyController" for="ci-company_sid">
Company:
<select ng-model="selectedCompanyIndex" ng-change="update(companysData.companys)">
<option ng-repeat="c in companysData.companys" value="{{$index}}" ng-selected="c.company.sid == selectedCompany.company.sid">{{c.company.company_name}} - {{c.company.link}}</option>
</select>
<hr>
{{selectedCompany.company.link}}
</label>
Controller:
function CompanyController($scope, $http) {
$scope.companysData = {
"companys": [{
"company": {
"link": "\/company\/8256606980000143017",
"sid": "8256606980000143017",
"company_name": "Company 29"
}},
{
"company": {
"link": "\/company\/8256603960000178016",
"sid": "8256603960000178016",
"company_name": "Company 1"
}}]
}
$scope.update = function(dataSet){
$scope.selectedCompany = dataSet[$scope.selectedCompanyIndex];
}
$scope.selectedCompany = $scope.companysData.companys[0];
}
http://jsfiddle.net/XzfVZ/3/