Question

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

<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

加载组合框

Answer 1

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

例如，

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

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

如何在角度js中填充页面加载时的组合框？

1 个答案: