Angularjs json ng-repeat仅使用手动迭代器显示项属性

时间:2014-04-25 00:59:01

标签: javascript json angularjs

我从某些网络服务获取json并使用ng-repeat显示它但我似乎无法显示项目属性。

<ul>
    <li data-ng-repeat="item in itemList">
            <p>{{item}}</p>
    </li>
</ul>

这样可以显示所有json

<ul>
    <li data-ng-repeat="item in itemList">
            <p>{{item.name}}</p>
    </li>
</ul>

这不起作用。

<ul>
    <li data-ng-repeat="item in itemList">
            <p>{{item[0].name}}</p>
    </li>
</ul>

这样可以,但只会显示1个项目。

我刚刚开始使用棱角分明,我觉得我因为缺少了一些东西,如果需要的话,试着发布一个样本的jfiddle。

更新

试图获取twitch.tv流信息

https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#get-streams

来自2个流的原始json,我从第一个例子得到的

http://pastebin.com/bQLqu9BR

更新2

我的代码

http://plnkr.co/edit/3eOZ598zt2hkrJcsOLhP

2 个答案:

答案 0 :(得分:1)

嗯......我似乎能够处理你提供的样本数据。

请参阅以下内容:

http://plnkr.co/edit/M3TQ4qI1DJPtgv6jCQLy?p=preview

段:

<ul>
  <li ng-repeat="item in srcData">
    <p ng-bind="item.game"></p>
    <p ng-bind="item.channel.display_name"></p>
    <p ng-bind="item.channel.url"></p>
  </li>
</ul>

答案 1 :(得分:0)

您不需要为每个项目包含一个索引来显示其属性,每个项目都知道其索引号,您可以使用$ index变量访问它。

检查出来:

http://plnkr.co/edit/ECyyFYVupVG7mKqwsGaB

<ul>
  <li ng-repeat="item in itemList">
    <a href="">{{$index}}</a>
    <p>
      Game: {{item.game}}
    </p>
    <p>
      Channel Name: {{item.channel.name}}
    </p>
  </li>
</ul>