如何使用 ng-repeat 显示 JSON 对象？答案

【问题标题】：How to show JSON object by using ng-repeat?如何使用 ng-repeat 显示 JSON 对象？
【发布时间】：2014-12-29 05:46:35
【问题描述】：

我正在使用 angularJS 创建树视图菜单。有没有办法得到这个结果？我正在使用控制器来获取它（$scope.results）。我把 JSON 结果集和控制器..

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file"><span>page1</span></li>
       <li class="file"><span>page2</span></li>
     </ul>
   </li>
   <li class="folder"><span>TestSuites</span>
     <ul>
       <li class="file"><span>TestSuites1</span></li>
     </ul>
   </li>
</ul>

JSON..

{
    "result": [
        {
            "@type": "d",
            "@rid": "#-2:1",
            "@version": 0,
            "name": "pg3"
        },
        {
            "@type": "d",
            "@rid": "#-2:2",
            "@version": 0,
            "name": "pg3"
        },
        {
            "@type": "d",
            "@rid": "#-2:3",
            "@version": 0,
            "name": "pg3"
        }
    ],
    "notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}

控制器..

vController.controller('v-PagesController', [
                '$scope',
                '$q',
                'vRESTService',
                function($scope, $q, vRESTService) {

                    vRESTService.getPages().then(
                            function(results) {
                                $scope.results = results;
                                console.log(results);
                                //console.log(results);
                              //  console.log(res);
    //;;
                        }, function() {
                                console.log(Error);
                            });
                }               

        ]);

【问题讨论】：

发布你要展示的JSON对象
我在这里使用 oreintDB。这是控制台中的结果集。 [对象{@type="d",@rid="#-2:1",@version=0,更多...},对象{@type="d",@rid="#-2:2 ", @version=0, more...}, Object { @type="d", @rid="#-2:3", @version=0, more...}]
结果一直到控制器，但我无法在 html 中显示。这是我在 html 中使用的代码....
Pages
- {{resultl.name}}

【解决方案1】：

You can use $http.get 
Js file 
$http.get('.json file ').success(function(data) {
    $scope.name = name;
}

HTML File 
<table> <tr ng-repeat= "x in y"> <td>{{x.Name }}</td> </tr> </table>

【讨论】：

【解决方案2】：

我只展示了页面部分，正如你所说的 json 还不包含测试套件：

修改您的控制器以将结果分配给范围属性：

vRESTService.getPages().then(
   function(results) {
      console.log(results);
      $scope.results = results;             
   }

那么你的观点应该是这样的：

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.result"><span>{{page.name}}</span></li>
     </ul>
   </li>
</ul>

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

我建议您将 json 更改为具有 pages 属性和 testSuites 属性：

{
  "pages": [
    {
        "@type": "d",
        "@rid": "#-2:1",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:2",
        "@version": 0,
        "name": "pg3"
    },
    {
        "@type": "d",
        "@rid": "#-2:3",
        "@version": 0,
        "name": "pg3"
    }
  ],
  "testSuites": [
    {
        "name": "TestSuites1"
    }
  ],
  "notification": "Query executed in 0.023 sec. Returned 3 record(s)"
}

然后你的观点是：

<ul>
   <li class="folder"><span>Pages</span>
     <ul>
       <li class="file" ng-repeat="page in results.pages"><span>{{page.name}}</span></li>
     </ul>
   </li>
   <li class="folder"><span>TestSuites</span>
     <ul>
       <li class="file" ng-repeat="testSuite in results.testSuites"><span>{{testSuite.name}}</span></li>
     </ul>
   </li>
</ul>

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

【讨论】：

嘿还是不行 :( 有没有办法检查结果是否进入 HTML 文件？
您是否将 json 分配给 $scope.results？使用开发人员工具检查网络选项卡以验证 json。还要检查控制台是否有任何错误
嘿，还添加了控制器。你能再检查一下代码吗？
所以你需要像这样分配 $scope.results：function(results) {$scope.results = results;}
嘿，我添加了那部分，但仍然无法正常工作。我也在这里编辑了..我检查了将 JSON 结果添加到 $scope.results = (json result.....) 而不从数据库中获取（硬编码）。但它也不起作用。

【解决方案3】：

AngularJS 提供了 $http.get 方法来获取 JSON 文件。一旦您获取数据作为响应，将其存储到控制器内的 $scope 对象中。然后使用 ng-repeat 绑定该数据。看这里的例子http://jharaphula.com/how-to-display-json-data-in-a-table-using-angularjs

【讨论】：