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

How to show JSON object by using ng-repeat?

本文关键字：JSON 对象 显示 ng-repeat 何使用      更新时间：2023-09-26

>我正在使用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);
                            });
                }               
        ]); 

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>

我只介绍了页面部分，因为您说过 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，使其具有页面属性和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

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

相关文章：