Question

我似乎在使用JSON数据填充AngularJS中的select元素时遇到了一些问题。

代码：

/* the API returns: {"id":3,"name":"Some Address"} */

app.service("addressService", function($http, $q) {
   var deferred = $q.defer();
   $http.get('/index.php/Pro/getAddresses').then(function(data) {
     deferred.resolve(data);
   });
   this.getCounties = function() {
     return deferred.promise;
   };
 });

 app.controller('homeController', function($scope, $http, addressService, $routeParams) {
   $scope.availableCounties = {};


   var promise = addressService.getCounties();
   promise.then(function(data) {
     $scope.availableCounties = data;
   });
 });

<select name="sender_address_id" ng-model="sender_address_id" ng-options="county.id as county.name for county in availableCounties">

</select>

当我查看页面时，选择字段仍然未填充。我也可以控制API。如果有比json_encode（）更好的函数或方法，那也可以解决问题。

编辑，控制台输出如下：

Object {data: Object, status: 200, headers: function, config: Object, statusText: "OK"}
config: Object
data: Object
  id: 3
  name: "Some Address"

  __proto__: Object

headers: function (c){a||(a=Xc(b));return c?(c=a[Q(c)],void 0===c&&(c=null),c):a}status: 200
statusText: "OK"
__proto__: Object

Answer 1

格雷格，不用担心，$ q不知道响应主体很重要，这就是你需要通过.data表示法访问它的原因。

我很好地概述了成功（）vs then（） - http://www.peterbe.com/plog/promises-with-$http

Answer 2

将$ http查询包装到服务中是没用的，因为$ http有一个内置的promises系统（see documentation），你不需要添加任何逻辑（缓存，数据排序等））。

所以，你可以摆脱你的服务，并使用这个死的简单控制器：

app.controller('homeController', function ($scope, $http) {
  $scope.availableCounties = [];

  $http.get('/index.php/Pro/getAddresses')
      .success(function (data) {
          $scope.availableCounties = data;
      })
      .error(function (error) {
          // Eventually do something when request fails
      });
});

修改

正如@kvetis在评论中所述，将http请求保存在一个地方是一种很好的做法。如果您关心良好实践，here is a fiddle将简单而干净地展示如何做到这一点。

AngularJS基于字符串的JSON键值对

2 个答案: