Question

我正在尝试使用AngularJS创建一个下拉菜单。我创建了一个工厂（'disResource'）并使用$ resource从数据库中检索数据。

工厂：

angular.module('app').factory('disResource', ['$resource', function($resource) {
  return $resource('/api/disciplines/:dis_id', {}, {
    query: {method:'GET', params: {}, isArray:true},
    create: { method: 'POST' },
    show: { method: 'GET' },
    update: { method: 'PUT', params: {dis_id: '@dis_id'}},
    delete: { method: 'DELETE', params: {dis_id: '@dis_id'} }
  });
}]);

控制器：

angular.module("app").controller("AdminDisSearchCtrl", ['$scope', 'disResource', function ($scope, disResource) { 

  disResource.query(function(reply) {
    $scope.results = { disciplines: reply};
  });
}]);

查看：

<h2>Select Discipline:</h2>
  <select data-ng-model="filterItem.discipline" data-ng-options="item.dis_name for item in results.disciplines"></select>

一切正常，下拉列表中填充了$ resource数据，Console.log表示所有内容都已加载。

的console.log（$范围）：

...
results: Object
disciplines: Array[6]
0: Resource
  $$hashKey: "00F"
  created_at: "2014-03-13 18:59:25"
  dis_id: 1
  dis_name: "AAA"
  updated_at: "2014-03-13 18:59:25"
  __proto__: Resource
1: Resource
...

但是，下拉列表显示空格。当我尝试在控制器中指定默认下拉项目时

$scope.filterItem = {
  discipline: $scope.results.disciplines[0]    
};

我收到控制台错误： TypeError：无法阅读属性＆＃39;学科＆＃39;未定义的

当我将数据硬编码到控制器中时，一切正常：

$scope.results = {
  disciplines: [
   { dis_id:1, dis_name:'AAA' },
   { dis_id:2, dis_name:'BBB' }
  ]
};

$scope.filterItem = {
  discipline: $scope.results.disciplines[0]
};

的console.log（$范围）：

...
results: Object
  disciplines: Array[2]
  0: Object
    $$hashKey: "007"
    dis_id: 1 
    dis_name: "AAA"
    __proto__: Object
  1: Object
  ...

问题： 当我从数据库中检索数据时，为什么无法设置默认下拉选项？

Answer 1

根据要求发布我的评论，因为它解决了问题。

$ resource或$ http服务对象上的所有调用都是异步完成的，因为它们是网络调用，并且不确定获取响应需要多长时间（如果它是同步的，则其他任何代码都不会执行请求正在进行，这是不受欢迎的。）

修复方法是将期望使用初始化数据的代码移动到异步函数调用的回调中。一旦检索到服务器的响应（在通过您定义的任何拦截器运行响应之后），就会调用回调。

在这种情况下，长话短说移动这段代码

$scope.filterItem = {
  discipline: $scope.results.disciplines[0]
};

在分配$ scope.results后进入回调。

如果使用$ http（如$ http.get（url）或$ http.post（data，url）），则调用将返回HTTPPromise，以便您可以在promise上使用成功和错误处理函数来获取数据。

使用AngularJS在下拉菜单中设置默认选择选项

1 个答案: