Question

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

        ]);

Answer 1

我只提供了页面部分，因为你说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

Answer 2

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>

Answer 3

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

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

3 个答案: