json ng-repeat angularjs中的多級對象

Question

我們如何通過ng-repeat將下面的JSON顯示爲ul>li列表？

事情是這樣的：

• 首頁
• 關於我們
  • 關於一個
  • 關於兩個
• 服務
  • 服務一個
  • 服務兩個

從下面JSON

{ 
    "Home_page": { 
     "name": "Home", 
     "shortname": "Home_page", 
     "heading": "Welcome to BSL-I" 
    }, 
    "About_us": { 
     "About-One": { 
      "name": "About one", 
      "heading": "Artist one" 
     }, 
     "About-Two": { 
      "name": "About Two", 
      "heading": "About Two" 
     } 
    }, 
    "Service": { 
     "Service-One": { 
      "name": "About one", 
      "shortname": "About_one", 
      "heading": "Artist one" 
     }, 
     "service-Two": { 
      "About-One": { 
       "name": "About one" 
         }, 
      "About-Two": { 
       "name": "About Two" 

      } 
     } 
    } 
} 

Answer 1

那麼首先你要在JSON JavaScript數組解碼爲有效的：

$scope.myArray = angular.fromJson(myJSONarray);

來自：https://docs.angularjs.org/api/ng/function/angular.fromJson

其次爲上市：

<ul> 
    <li ng-repeat="element in myArray"> 
    {{element}} 
    <ul ng-show="element[0]"> 
     <li ng-repeat="subElement in element[0]"> 
     {{subElement}} 
     </li> 
    </ul> 
    </li> 
</ul> 

我沒有測試過它，但應該看起來像上面那樣。

Answer 2

腳本::

$http.post('URL') 
.success(function (data, status, headers, config) { 
    var res = JSON.parse(data); 
     $scope.response= res; 

現在你的JSON對象是握住response。

您可以使用響應來區分類似的對象：

response.Home_page, response.About_us.About-One, response.Service.Service-One, response.Service.service-Two 

適用於HTML：

<ul> 
    <li ng-repeat="home in response.Home_page"> 
     {{home.name}} 
    </li> 
</ul>