2 つのコンボボックスを含むページがあります。これは私の見解です:
<div ng-init="loadComboBox()">
<select class="form-control" ng-model="SelectedItem1" ng-options="employee.FirstName for employeein Employees">
<select class="form-control" ng-model="SelectedItem2" ng-options="employeePlan.PlanName for employeePlan in Plans">
</select>
</div>
this is my controller : このコントローラーは、API 呼び出しを行うサービスを呼び出します。
angular.module('myApp').controller('EmployeeCtrl',
function($scope, $http, EmpSvc, ngProgress, PlanSvc) {
$scope.Employees= null;
$scope.Plans= null;
$scope.SelectedItem1 = '';
$scope.SelectedItem2 = '';
$scope.loadComboBox= function() {
ngProgress.start();
EmpSvc.getEmployees().then(function(data) {
$scope.Employees= data;
$scope.SelectedItem1 = $scope.Employees[0].FirstName;
});
PlanSvc.getPlans().then(function(plans) {
$scope.Plans = plans;
$scope.SelectedItem2 = $scope.Plans[0].PlanName;
});
ngProgress.complete();
}
});
コントローラーはサービスを適切に呼び出し、スコープ値にもデータを取得します。値はScope.SelectedItem1とScope.SelectedItem2に割り当てられますが、UI 側では表示されません。$scope.$$apply() も実行しようとしましたが、どちらも機能しませんでした。
コンボボックスはドロップダウンにすべての値を表示しますが、コンボボックスに少なくとも1つのデフォルト値を入力したいです。誰かがそれを手伝ってくれますか?
基本的に、ページが読み込まれる前にAPIからコンボボックスを読み込みたい