1

我有一个页面，其中有两个组合框。这是我的观点：

<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>

这是我的控制器：该控制器调用该服务，该服务又进行 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()，但也没有用。

组合框确实显示了下拉列表中的所有值，但我希望组合框中至少填充一个默认值。有人可以帮我吗？

基本上我想在页面加载之前从 API 加载组合框

4

1 回答 1

0

我认为，您没有直接在 $scope 对象上使用 $scope.Employees 和 $scope.Plans。您必须在 $scope 上创建空对象。

例如，

$scope.vm = {};
$scope.vm.employees = {};
$scope.vm.plans = {};

我在 plnkr 中为您的问题创建了示例。访问http://plnkr.co/edit/rKyjijGWSL1IKy51b8Tv?p=preview

于 2014-10-20T11:06:39.757 回答