I seem to be facing an issue with my code:
There is an object that holds the id of an item, along with an array containing these items. I require a 'select' element to display the currently selected item and allow for changing the selection.
The model of the 'select' has been set to object.selectId. The ng-options for the 'select' are "option.Text for option in options track by optionId".
However, there seems to be a mismatch between the model and the types of 'select' options.
Could you please guide me on achieving the desired outcome?
Here's a fiddle demonstrating what I am trying to do: 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 possible, kindly point out any errors in my approach or correct the fiddle.
Thank you ^_^ Andy
Clarification: The existing selected item in the model has id 1. I would like the list to automatically preselect the option with id 1 in this scenario. Furthermore, when an option is selected, it should update the item.id with an integer value instead of the entire option item. It should specifically set item.id to the option's Id.