AngularJS 基于字符串的 JSON 键值对答案

【问题标题】：AngularJS String-based JSON key value pairsAngularJS 基于字符串的 JSON 键值对
【发布时间】：2015-02-10 07:53:57
【问题描述】：

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

代码：

/* 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() 更好的函数或方法，也能解决问题。

编辑，控制台输出如下：

对象{数据：对象，状态：200，标题：函数，配置：对象，状态文本：“OK”} 配置：对象数据：对象编号：3 名称：“某个地址” __proto__: 对象标题：函数 (c){a||(a=Xc(b));return c?(c=a[Q(c)],void 0===c&&(c=null),c):a}状态：200 状态文本：“确定” __proto__: 对象

【问题讨论】：

如果您在视图中记录 {{availableCounties}} 是否为空？
在你的 promise 中分配给 availableCounties 时，数据实际上是什么样子的？它可能需要一个对象数组才能让“in availableCounties”处理您的 ng-options 声明
更新了问题。 :|
嗯，好的，它的可读性不太好，但我已经看到响应中有其他命名属性，如 status 和 statusText，这意味着仅分配“数据”不会从您的承诺中起作用。 then() 中传递的参数是整个响应对象，因此它类似于 response.data 来实际访问数据数组以分配给您的范围变量。
对不起。我试图让它尽可能可读。将 availableCounties 分配给 data.data 似乎可以解决问题。谢谢。

标签： php angularjs

【解决方案1】：

Greg，不用担心，$q 不知道响应正文很重要，因此您需要通过 .data 表示法访问它。

我在这里对 success() 与 then() 进行了简要概述 - http://www.peterbe.com/plog/promises-with-$http

【讨论】：

【解决方案2】：

在这里将 $http 查询包装到服务中是没有用的，因为 $http 有一个内置的 Promise 系统 (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 在 cmets 中所说，将 http 请求保存在一个地方是一种很好的做法。如果您关心良好实践，here is a fiddle 将演示如何简单而干净地做到这一点。

【讨论】：

我不同意这一点。如果您在更多地方使用相同的 API 调用，最好使用服务。
@kvetis 是的，我完全同意你的看法 :) 但是我们必须简单地在服务中返回 $http 请求，而不是覆盖它的承诺系统。在这里，我不完全确定好的做法是优先事项^^
是的。确实不用$q，直接返回$http.get的结果就可以了