0

Начал недавно изучать angular и не могу разобраться как правильно вывести информацию об объекте, который содержит массивы и массивы объектов. Имеется такой вот объект в scope

function ListCtrl($scope) {
$scope.model = {
        objOne: ['object1', 'object2', 'object3'],
        objTwo: [
            { id: 'plan1', name: 'plan name1', descr: { nameDescr: "nameDescr1", description: "plan descr1" } },
            { id: 'plan2', name: 'plan name2', descr: { nameDescr: "nameDescr2", description: "plan descr2" } },
            { id: 'plan3', name: 'plan name3', descr: { nameDescr: "nameDescr3", description: "plan descr3" } },
        ]
      };
    }

Ну и html:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://angular-doc.herokuapp.com/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>
<div ng-controller="ListCtrl">
    <div ng-repeat="object in model">
        {{object.objOne}}:<br />
            <span>{{object.objTwo.id}}, {{object.objTwo.name}}</span>
            <div>
                <h1>{{object.objTwo.descr.nameDescr}}</h1>
                <span>{{object.objTwo.descr.description}}</span>
            </div>
    </div>
</div>
  </body>
</html>

То есть хочу видеть что-то вроде:

object1:
         plan1, plan name1
         nameDescr1
         plan descr 1
object2:
         plan2, plan name2
         nameDescr2
         plan descr 2
object3:
         plan3, plan name3
         nameDescr3
         plan descr 3

Надеюсь пример понятен. То есть хочу понять, как вот так по порядку выводить информацию об объекте, который имеет большую вложенность других объектов?

1 ответ 1

0

ng-repeat по сути это тот же цикл, а вы пытаетесь перебрать циклом объект (model) что в корне не верно

В вашем случае код должен выглядеть примерно так (хотя я бы представил данные в другом виду)

  <div ng-controller="listCtrl">
  <div ng-repeat="object in model.objOne track by $index">
     <dl>
      <dt>{{object}}</dt>
       <dd>{{model.objTwo[$index].name}}</dd>
       <dd>{{model.objTwo[$index].descr.description}}</dd>
    </dl>
  </div>

Рабочий пример - https://jsfiddle.net/cga48osv/1/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.