2015-03-31 2 views
1

Как мы можем показать ниже JSON в ul>li, перечислив через ng-repeat?json ng-repeat многоуровневый объект в angularjs

Что-то вроде этого:

  • Главная
  • о нас
    • О один
    • О двух
  • служба
    • служба одна
    • служба Два

Снизу 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" 

      } 
     } 
    } 
} 

ответ

0

Ну, прежде всего вы должны декодировать JSON, чтобы действительный яваскрипта массив:

$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> 

Я не тестировал его, но он должен выглядеть примерно так.

0

Script ::

$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> 
Смежные вопросы