0

JSON

[
  {
    "category": "Ванные комнаты",
    "example": [
      {
        "source": "img/design/gallery/bathRoom",
        "format": ".jpg"
      },
      {
        "source": "img/design/gallery/bathRoom",
        "format": ".jpg"
      }
    ]
  },
  {
    "category": "Гостиная комнаты",
    "example": [
      {
        "source": "img/design/gallery/livingRoom",
        "format": ".jpg"
      },
      {
        "source": "img/design/gallery/livingRoom",
        "format": ".jpg"
      }
    ]
  }
]

Нужно вывести след образом:

HTML

   <div>
       <a href="#">Ванные комнаты</a>
       <a href="#">Гостиная комнаты</a>
    </div>

    <ul>
       <li>
          <p>Путь: img/design/gallery/bathRoom</p>
          <p>Формат: .jpg</p>
       </li>
       <li>
          <p>Путь: img/design/gallery/bathRoom</p>
          <p>Формат: .jpg</p>
       </li>
    </ul>
    <ul>
       <li>
          <p>Путь: img/design/gallery/livingRoom</p>
          <p>Формат: .jpg</p>
       </li>
       <li>
          <p>Путь: img/design/gallery/livingRoom</p>
          <p>Формат: .jpg</p>
       </li>
    </ul>

пример Plunker

1 ответ 1

1

ng-repeat - это обычный проход по массиву с копированием элемента у которого установлен этот атрибут.

Так как требуется сформировать два не связанных между собой блока - потребуется два ng-repeat

  1. один построит ссылки

    <a href="#" ng-repeat="item in items">{{item.category}}</a>
    
  2. второй - списки

    <ul ng-repeat="item in items">
    </ul>
    
  3. Так как элементы списков - сами являются массивом - нужен еще один ng-repeat по ним для построения <li>,

    <li ng-repeat="example in item.example></li>
    
  4. и еще один - для прохода по конечным объекта и построения <p>

    <p ng-repeat="data in example">{{data}}</p>
    

Пример:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.items = [{
      "category": "Ванные комнаты",
      "example": [{
        "source": "img/design/gallery/bathRoom",
        "format": ".jpg"
      }, {
        "source": "img/design/gallery/bathRoom",
        "format": ".jpg"
      }]
    }, {
      "category": "Гостиная комнаты",
      "example": [{
        "source": "img/design/gallery/livingRoom",
        "format": ".jpg"
      }, {
        "source": "img/design/gallery/livingRoom",
        "format": ".jpg"
      }]
    }];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <a href="#" ng-repeat="item in items">{{item.category}}</a>
  </div>

  <ul ng-repeat="item in items">
    <li ng-repeat="example in item.example">
      <p ng-repeat="(key,val) in example">{{key}}: {{val}}</p>
    </li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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