1

所以我对 Angular 还是很陌生，我想做的是获取一个从 RESTful 调用中获得的 json 集合，并循环遍历每个集合以显示它们的值，同时将其指定的 id 关联到一个 href 中。

下面你会发现我尝试过的：

<div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        Sort by:
        <select ng-model="orderProp">
            <option value="name">Alphabetical</option>
            <!--option value="age">Newest</option>
            <option value="-age">Oldest</option-->
        </select>

    </div>
    <div class="span10">
        <!--Body content-->
        <ul class="documents">
            <li ng-repeat="document in documents | orderBy:orderProp" class="thumbnail">
                <a href="#/rest/{{document.document_id}}">{{document.title}}</a>
            </li>
        </ul>
        <pre>{{ documents | json }}</pre>
    </div>

Shttp 调用：

    function DocListCtrl($scope, $http)
{
    console.log('getting documents data');
    $http.get('/*RESTful call here*/').success(function(data)
    {
        $scope.documents = data;
    });
    $scope.orderProp = 'name';
}

当我运行页面时，使用

<pre>{{ documents | json }}</pre>

但 ng-repeat 未能实施。

编辑

这是我正在使用的 Json 的一个示例。

{
  "next": {},
  "items": [
    {
      "document_id": 3177554002,
      "title": "title of some item"
    }
]
}

ng-repeat 调用未能按我希望的方式列出我的数据，我到底做错了什么？

谢谢您的帮助

4

2 回答 2

1

根据您的 JSON，我看到您的 ng-repeat 不太正确。迭代时需要引用items文档对象内的数组，如下所示：

<ul class="documents">
    <li ng-repeat="document in documents.items | orderBy:orderProp" class="thumbnail">
        <a href="#/rest/{{document.document_id}}">{{document.title}}</a>
    </li>
</ul>

或者，如果您想让它更简单，请绑定data.items到documents而不是仅绑定data，然后保留现有模板。这也将确保您orderBy继续工作。

于 2013-08-29T14:00:18.100 回答
0

请参阅此处：https : //stackoverflow.com/a/11972028/1449799 您要考虑使用 routeprovider 的 reolve 属性。注意小问题（解决方案有点过时，$defer 已重命名为 $timeout）延迟 AngularJS 路由更改直到模型加载以防止闪烁

于 2013-08-28T21:14:00.820 回答