Angular JS中的$ http.get API

Question

我正在尝试从uiFaces API中提取的AngularJS中的ng-repeat 。 这是我目前的代码。 这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还是很陌生，所以想尽一切办法避免返回任何错误。 谁能告诉我我在做什么错？

任何帮助表示赞赏。 提前致谢！

Answer 1

/random提供的data不是要repeat的多个face的集合。 它只是一个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 ];

Answer 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因为它是一个项目。

Answer 3

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

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

Answer 4

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