Angular JS 中的 $http.get API答案

【问题标题】：$http.get API in Angular JSAngular JS 中的 $http.get API
【发布时间】：2014-10-14 02:29:14
【问题描述】：

我正在尝试在 AngularJS 中做一个 ng-repeat，它从 uiFaces API 中提取。这是我目前的代码。这个http.get 包裹在我的.controller 中：

$http.get('http://uifaces.com/api/v1/random').success(function(data){
      $scope.uifaces = data;
});

我正在尝试使用ng-repeat 重复一张面孔列表：

<ul>
  <li ng-repeat="face in uifaces">
      <h6>{{ face.username }}</h6>
      <img ng-src="{{ face.image_urls.normal }}">
  </li>
</ul>

但我只是不断收到两个空白列表项。我对 Angular 和 API 很陌生，所以我想弄清楚为什么什么都没有返回。谁能告诉我我做错了什么？

感谢任何帮助。提前致谢！

【问题讨论】：

您是否在将data 设置为范围之前对其进行记录？ 100% 确定您会收到回复吗？

标签： javascript angularjs ng-repeat

【解决方案1】：

/random 提供的data 不是多个faces 到repeat 的集合。这只是一个Object。

{
    "username": "...",
    "image_urls": {
        "normal": "...",
        ...
    }
}

虽然，作为一个对象，你可以直接访问它的属性。

<ul>
  <li>
    <h3>{{ uifaces.username }}</h6>
    <img ng-src="{{ uifaces.image_urls.normal }}">
  </li>
</ul>

或者，如果您想将其用作repeat 的集合，您必须自己定义该部分：

// wrap `data` in an `Array` to `repeat`
$scope.uifaces = [ data ];

【讨论】：

我明白了。所以我认为没有办法直接从那个 API 获得重复——对吗？我还可以使用ng-repeat来表示三个用户名和图片的列表，还是说我必须自己写那部分？
@realph It doesn't appear /random has any options to provide more than a single user。您可以尝试询问业主是否会添加这样的选项。否则，如果您想要 3 个列表，则必须发出 3 个单独的 $http.get() 请求并合并它们各自的 data。相关：accessing data of multiple http calls - how to resolve the promises
这是最优雅的方式吗？我使用 uiFaces 的唯一目的是为我的 Angular 应用程序中的评论部分生成一堆占位符（但很漂亮）的用户名和用户图片。所以我需要一种简单的方法来提取用户名和图片。

【解决方案2】：

这是我从那个 api 调用中得到的结果：

{
  "username": "jckieangel",
  "image_urls": {
    "epic": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/128.jpg",
    "bigger": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/73.jpg",
    "normal": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/48.jpg",
    "mini": "https:\/\/s3.amazonaws.com\/uifaces\/faces\/twitter\/jckieangel\/24.jpg"
  }
}

所以不知道为什么你得到两个空白的 LI 而不仅仅是一个。

您需要去掉 image_urls 中的反斜杠才能正确显示，因此您可能需要为此添加一个辅助方法

  <h6>{{ face.username }}</h6>
  <img ng-src="{{ fixUrl(face.image_urls.normal) }}">

然后在你的控制器中创建fixUrl(url)

您还需要直接将其设为数组（或将数据添加到现有数组中）$scope.uifaces = [data]; 或删除 ng-repeat，因为它是单个项目。

【讨论】：

【解决方案3】：

不要使用 ng-repeat，因为它只有一项。

<ul>
<h6>{{ face.username }}</h6>
      <img ng-src="{{ face.image_urls.normal }}">
</ul>

【讨论】：

【解决方案4】：

<ul>
  <li ng-repeat="face in uifaces">
   <h6>{{ face.username }}</h6>
   <img ng-src="face.image_urls.normal">
  </li>
</ul>

【讨论】：