Похоже, вы используете AngularJS и ошибочно пометили вопрос как angular.Или, по крайней мере, это то, что видно из вашего синтаксиса в AngularJS.
Помня об этом, вот ответ, который поможет вам добиться этого как в AngularJS, так и в Angular:
В AngularJS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<select class="form-control" ng-model="selected" ng-options="x.value as x.display for x in options">
</select>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyController", function($scope) {
$scope.options = [{
value: "ADVISORY",
display: "Advisory Conflict Check"
},
{
value: "OTHER",
display: "Other Conflict Check"
}
];
$scope.selected = $scope.options[0];
});
</script>
</body>
</html>
Существует проблема с вашим синтаксисом ng-options.ng-options="x.value for x.display in options" должен был быть ng-options="x.value for x in options" или ng-options="x.value as x.display for x in options"
In Angular:
Вы можете использовать синтаксис *ngFor для повтора параметров, которые вы хотите указать как select option с.Вот как будет выглядеть компонентный класс в этом случае:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selected = 'ADVISORY';
options = [{
value: "ADVISORY",
display: "Advisory Conflict Check"
},
{
value: "OTHER",
display: "Other Conflict Check"
}
];
}
А в вашем шаблоне:
<select [(ngModel)]="selected">
<option value="null" disabled>Select an option</option>
<option
*ngFor="let option of options"
[value]="option.value">
{{ option.display }}
</option>
</select>
Вот Рабочий пример StackBlitz для вашего реф.