Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

Question

How can I set the initial selection of a select field using ng-options?

Consider the items we have:

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

The HTML code would be:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

Instead of selecting the option with:

$scope.selected = $scope.items[0];

If I only have the ID information, I want to initialize the select with something like this:

$scope.selected = $scope.otherRandomObject.id

I believe that using track by item.id establishes the connection between the object and its ID.

Answer 1

Answer №1

When looking to set a default value, the ng-selected directive can be utilized

<select ng-options="option as option.text for option in options" ng-selected="$first"></select>

By using ng-selected="$first", the first option in the array will be automatically selected

Trust this explanation has clarified your query

Answer 2

When looking to set a default value, the ng-selected directive can be utilized

<select ng-options="option as option.text for option in options" ng-selected="$first"></select>

By using ng-selected="$first", the first option in the array will be automatically selected

Trust this explanation has clarified your query