Develop Reference

Select default option in a dropdown, save the value in the value attribute of the dropdown. Angular.js. Angular.js

I have seen infinity of post to try to choose by default an option in a dropdown. But I have not been able to achieve it. I have an array of some countries.
$scope.regions =
[
{
name: "COLOMBIA",
code: 5
},
{
name: "ARGENTINA",
code: 6
},
{
name: "BRAZIL",
code: 7
}
];
I have this variable:
$scope.selectThisId={
"id":6,
"animal":'dog',
"variable":'xxx32'
};
I need the dropdown value to be equal to the id attribute of the
$scope.region=$scope.selectThisId.id;
variable.
http://plnkr.co/edit/nmc8iLz6BIFac0Swfth8?p=preview

Working demo: http://plnkr.co/edit/zhye91pDUEMgaZnXZGWE?p=preview
You basically create a default region by doing
$scope.select = $scope.selectThisId.id;
$scope.regionSelected = {};
then create a select tag with ng-options, binding it to the model, and calling ng-init on the model.
<select ng-options="item as item.name for item in regions track by item.code"
ng-model="regionSelected" ng-init="regionSelected.code = select">
</select>

You can add a filter to your controller to get the default region (don't forget to add $filter after $scope):
$scope.defaultValue = $filter('filter')($scope.regions, {code: $scope.selectThisId.id}, true)[0];
and then add this to your select in your view
ng-init="select = defaultValue"
Demo

DEMO
var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
$scope.regions =
[
{
name: "COLOMBIA",
code: 5
},
{
name: "ARGENTINA",
code: 6
},
{
name: "BRAZIL",
code: 7
}
];
$scope.selectThisId={
"id":6,
"animal":'dog',
"variable":'xxx32'
};
$scope.region=$scope.selectThisId.id;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<fieldset ng-controller="FirstCtrl">
<select
ng-options="item.code as item.name for item in regions"
ng-model="region"></select>
</fieldset>
</div>

why isn't my angular options track by id working

I'm sure I must be doing this wrong, but:
I have an object that stores the id of an item. I also have an array of these items. I need to have a 'select' that represents the currently selected item, but that can also change the selected item.
I have set the 'select's model to the object.selectId.
The 'select' ng-options is "option.Text for option in options track by optionId"
Yet the model and 'select' options types don't match
How do I achieve what I need?
Here's a fiddle of what I am doing: https://jsfiddle.net/vb2xe1mc/5/
Code:
<script>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
id: 1
};
$scope.options = [
{Text: "zero", Id: 0},
{Text: "one", Id: 1},
{Text: "two", Id: 2},
{Text: "three", Id: 3}
];
$scope.selectChange = function() {
alert($scope.item.id);
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item.id" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
If you can, please let me know where I have gone wrong or correct the fiddle.
Thanks ^_^
Andy
Clarification:
The model item has id 1 already selected. I need the list to preselect the option with id 1 in this case. Also, When the option is selected it does not set the item.id to an int, rather it sets it to the entire option item. I need it to set the item.id to the option.Id

<select ng-model="item.id" ng-options="option.id as option.Text for option in options" ng-change='selectChange()'>
You want to select option.id, not option and track by is unnecessary.

Bind the select to ng-model="item", not ng-model="item.id".
Also decide on id vs. Id
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options track by option.Id" ng-change='selectChange()'>
</select>
</div>
</div>
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
console.log ($scope.item.Id)
alert($scope.item.Id);
};
}]);
See here for a fixed version: https://jsfiddle.net/ax3k418p/

https://jsfiddle.net/vb2xe1mc/10/
You need to bind item to ng-model, and inititally $scope.Id should be set to 1 not $scope.id = 1
Also check when you alert it should be alert($scope.item.Id);
<div ng-app="myApp">
<div ng-controller="myctrl">
<select ng-model="item" ng-options="option.Text for option in options" ng-change='selectChange()'>
</select>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myctrl', ['$scope', function($scope) {
$scope.item = {
Id: 1
};
$scope.options = [{
Text: "zero",
Id: 0
}, {
Text: "one",
Id: 1
}, {
Text: "two",
Id: 2
}, {
Text: "three",
Id: 3
}, ];
$scope.selectChange = function() {
alert($scope.item.Id);
};
}]);

Angularjs: update select options

I have two select menus . One for country selection and other for state. I need to update states based country selected. I am able to log states but not able to list them in select menu.Please help.
Angular:
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.countries = [
{ label: 'Please select', value: 0 },
{ label: 'India', value: 1 },
{ label: 'US', value: 2 }
];
$scope.data = [{'1':[{ label: 'Delhi', value: 0 },{ label: 'Mumbai', value: 1 },{ label: 'Chennai', value: 2 }]},
{'2':[{ label: 'Alabama', value: 3 },{ label: 'Alaska', value: 4 },{ label: 'Arizona', value: 5 }]}];
$scope.vm = {states: []};
$scope.updateStates = function(countryCode){
$scope.vm.states = $scope.data[countryCode-1];
console.log($scope.vm.states);
};
$scope.correctlySelected = $scope.countries[0];
});
HTML:
<body ng-app="demoApp">
<div ng-controller="DemoController">
<select ng-model="correctlySelected" ng-change="updateStates(correctlySelected.value)" ng-options="opt as opt.label for opt in countries">
</select>
<select ng-options="opt as opt.label for opt in vm.states">
</select>
</div>
</body>
JS Bin:
http://jsbin.com/pafosewedo/1/edit?html,js,console,output

You need to add ng-model to your states <select> - this is required when you are using ng-options
You also have an inconvenient model for the states data. Each element of the data array that corresponds to the country's states is an object with a changing key whose value is an array of states. You could make it work, but it's better to change it to something more reasonable:
$scope.data = {
1: [{ label: 'Delhi', value: 0 }, {...}, ],
2: [{...}, {...}, ] // same for US
}
Then it would work with how you specified your ng-options for states, and you wouldn't have to deal with indices:
$scope.updateStates = function(countryCode){
$scope.vm.states = $scope.data[countryCode]; // access by property
};

I think, that you should use some filter like that if you don't want to change your model:
.filter('stateFilter', function() {
return function(states, countryID) {
var filtered = [];
angular.forEach(states, function(state){
if(state.value === countryID)
filtered.push(state);
});
return filtered;
};
});
to filter out all values that have value equal to selected country.value in first select control.
To use that filter you need to modify your ng-repeat directive value in state select control:
ng-options="state as state.label for data | stateFilter:correctlySelected"

I came up with the following solution, view my JSBin
This solutions works by setting the countryCode in the scope when we are updatingStates.
$scope.updateStates = function(countryCode){
$scope.countryCode = countryCode;
$scope.vm.states = $scope.data[countryCode-1];
console.log($scope.vm.states[countryCode]);
};
This change is then reflected in the view.
<select>
<option ng-repeat='i in vm.states[countryCode]'> {{i.label}}
</option>
</select>

how to set initial value to combobox in angular?

If I want to set the value of the combobox I have tried this:
controllercode:
$scope.streettypeMockData = [{
name: 'Street',
value: 'Street'
}, {
name: 'Avenue'
}, {
name: 'Crescent'
}, {
name: 'Drive'
}, {
name: 'Road'
}, {
name: 'Highway'
}];
var sel = "Street";
var selectedValue = {
name: sel
};
$scope.streetTypeSelected = selectedValue;
Can anyone tell me why this does not work? see also http://plnkr.co/edit/4ISL8A1cNGCtafsc0leX?p=preview

The code has a few issues:
The ng-options select the name, while the ng-model points to an object. Better use streetType as streetType.name for streetType in streettypeMockData to select the entire object.
In this case, the initial value will not be honoured because Angular will try to compare objects by reference; use track by.
The full <select> should be:
<select class="form-control" ng-model="streetTypeSelected"
ng-options="streetType as streetType.name for streetType in streettypeMockData track by streetType.name">
See forked plunker.

You can simple use ng-init like this
<select ng-init="streetTypeSelected = streettypeMockData[0]" class="form-control" ng-model="streetTypeSelected" ng-options="streetType.name for streetType in streettypeMockData">
</select>
Working Demo
Also you can do Like as shown below
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.streettypeMockData = [
{name: 'Street', value: 'Street'},
{name: 'Avenue'},
{name: 'Crescent'},
{name: 'Drive'},
{name: 'Road'},
{name: 'Highway'}
];
$scope.streetTypeSelected = $scope.streettypeMockData[0];
});
Working Demo
Also take a look at this
https://docs.angularjs.org/api/ng/directive/select

How to set a default ngOptions value, when options are objects, and default is an integer ID

I'm working with ngOptions to display a select element, and want to connect the model to the value that's set as the value in ngOptions.
var app = angular.module('test', []);
app.controller('TestCtrl', ['$scope',
function ($scope) {
//Use random to simulate different data from an API
$scope.default = Math.floor(Math.random()*3);
$scope.options = [
{
id: 0,
name: "Option 1"
},
{
id: 1,
name: "Option 2"
},
{
id: 2,
name: "Option 3"
}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestCtrl">
<select ng-model="default" ng-options="val.name for val in options track by val.id">
</select>
<pre>Default should be ID {{default}}, or Option {{default+1}}
</div>
</div>
I've tried using track by, select as, and I've found two solutions that work, but are not ideal.
Ideally, I'd be able to set default
Solution 1:
// Loop through entire array of objects
$scope.options.forEach(function (v, k) {
// Compare ID to what the default should be
if (v.id === $scope.default) {
// Set object to default
$scope.default = v;
return true;
}
});
Solution 2:
JS
$scope.options = {
"Option 1": 0,
"Option 2": 1,
"Option 3": 2
};
HTML
<select ng-model="default" ng-options="value as key for (key, val) in options">
The thing that's tough about this solution is it only works if the object has no more than two values, since a key cannot be an object.
Is there any way to have Angular set a default by key, without having to include the entire object?

try it like this
<select ng-options="item.id as item.name for item in options" ng-model="selected"></select>
then in controller
$scope.selected = 1;
similar plunkr example

var app = angular.module('test', []);
app.controller('TestCtrl', ['$scope',
function ($scope) {
//Use random to simulate different data from an API
$scope.options = [
{
id: 0,
name: "Option 1"
},
{
id: 1,
name: "Option 2"
},
{
id: 2,
name: "Option 3"
}
];
$scope.default = $scope.options[Math.floor(Math.random()*3)];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<div ng-controller="TestCtrl">
<select ng-model="default" ng-options="val.name for val in options">
</select>
<pre>Default should be ID {{default.id}}, or Option {{default.id+1}}
</div>
</div>