Использование вложенного ng-Repeat для генерации структуры HTML

Я перевожу свой HTML-код на Angular, используя ng-repeat, Структура HTML похожа на текущую: у меня 9 элементов, и я отображаю максимум 3 элемента в строке. У меня может быть любое количество предметов, и правило - максимум 3 предмета на строку. В настоящее время мой HTML выглядит так -

<div class="row clearfix">
    <div class="btn-group btn-group-justified btn-group-lg">
       <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="1.05">Item 1</button>
       </div>
       <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="2.05">Item 2</button>
       </div>
       <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="2.55">Item 3</button>
       </div>
    </div>
</div>
<div class="row clearfix">
    <div class="btn-group btn-group-justified btn-group-lg">
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="2.65">Item 4</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="3.05">Item 5</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="4.95">Item 6</button>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="btn-group btn-group-justified btn-group-lg">
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="4.15">Item 7</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="1.15">Item 8</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-xlarge btn-primary-items" data-price="1.95">Item 9</button>
        </div>
    </div>
</div>

Теперь необходимо, чтобы эта же структура была сгенерирована с использованием Angular, то есть я получу полезную нагрузку JSON, которая будет иметь имя элемента и цену, а мой код должен сгенерировать такую ​​же структуру.

Мой JSON будет выглядеть так -

    items = [
     { name: "item1", price: "1.05" },
     { name: "item2", price: "2.05" },
     { name: "item3", price: "2.55" },
     { name: "item4", price: "2.65" },
     { name: "item5", price: "3.05" },
     { name: "item6", price: "4.95" },
     { name: "item7", price: "4.15" },
     { name: "item8", price: "1.15" },
     { name: "item9", price: "1.95" }
    ];
Источник

3 ответа

Решение

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

var itemRows = [
 [{ name: "item1", price: "1.05" },
 { name: "item2", price: "2.05" },
 { name: "item3", price: "2.55" }],
 [{ name: "item4", price: "2.65" },
 { name: "item5", price: "3.05" },
 { name: "item6", price: "4.95" }],
 [{ name: "item7", price: "4.15" },
 { name: "item8", price: "1.15" },
 { name: "item9", price: "1.95" }]
];

.. а затем пройти itemRows (не элементы) как объект, который будет отображаться в шаблоне.

Предполагая, что изменение бэкэнда не является вариантом, предварительная обработка - путь, вот один из способов:

В Javascript:

    var myApp = angular.module('myItems',[]);

    myApp.controller('ItemRowsCtrl', ['$scope', function($scope) {
      var items = [
        { name: "item1", price: "1.05" },
        { name: "item2", price: "2.05" },
        { name: "item3", price: "2.55" },
        { name: "item4", price: "2.65" },
        { name: "item5", price: "3.05" },
        { name: "item6", price: "4.95" },
        { name: "item7", price: "4.15" },
        { name: "item8", price: "1.15" },
        { name: "item9", price: "1.95" }
      ];
      var itemRows = [];
      for (var i = 0; i < items.length; ++i) {
        if (i % 3 === 0) {
            itemRows.push([]);
        }
        var itemRow = itemRows[itemRows.length - 1];
        itemRow.push(items[i]);
      };  
      $scope.itemRows = itemRows;
    }]);

В вашем шаблоне:

    <body ng-app="myItems">
      <div ng-controller="ItemRowsCtrl">
        <div class="row clearfix" ng-repeat="itemRow in itemRows">
            <div class="btn-group btn-group-justified btn-group-lg">
               <div class="btn-group" ng-repeat="item in itemRow">
                    <button type="button" class="btn btn-xlarge btn-primary-items" data-price="{{item.price}}">{{item.name}}</button>
               </div>
            </div>
        </div>
      </div>
    </body>

JsBin ответ

Источник

Упрощенный пример с использованием CSS

Как я уже упоминал в моем комментарии выше, я считаю, что лучший способ добиться своей "сетки" - это использовать CSS. Это минимизирует кодирование в ваших контроллерах. Это оставляет ваш контроллер более отделенным от дизайна. Если вы хотите изменить количество элементов в сетке, вы измените CSS, а не шаблон и контроллер.

Дополнительным преимуществом является то, что теперь вы можете использовать CSS Media Queries и при необходимости изменять макет для мобильных устройств и т. Д.

Мои элементы HTML выбора для такого рода вещи ul а также li, Возможно, вам придется добавить и изменить в соответствии с вашими требованиями.

шаблон

<ul class="buttons">
    <li ng-repeat="item in items">
        <button type="button" class="btn btn-xlarge btn-primary-items" data-price="1.05">{{ item.name }}</button>
    </li>
</ul>

контроллер

function MainController($scope) {
    $scope.items = [{
        name: "item1",
        price: "1.05"
    }, {
        name: "item2",
        price: "2.05"
    }, {
        name: "item3",
        price: "2.55"
    }, {
        name: "item4",
        price: "2.65"
    }, {
        name: "item5",
        price: "3.05"
    }, {
        name: "item6",
        price: "4.95"
    }, {
        name: "item7",
        price: "4.15"
    }, {
        name: "item8",
        price: "1.15"
    }, {
        name: "item9",
        price: "1.95"
    }];
}

CSS

ul.buttons {
    list-style-type:none;
}

ul.buttons li {
    padding: 5px;
    width:30%;
    display:inline-block;
    vertical-align:top;
    text-align:center;
}

демонстрация

Источник

Я пытался воспроизвести то, что вы пытаетесь спросить в этом http://jsfiddle.net/7eYnt/. Надеюсь, поможет. Это объясняет концепцию ng-repeat в вашем сценарии. Благодарю.

HTML

 <div class="row clearfix" ng-repeat="item in items">
        <div class="btn-group btn-group-justified btn-group-lg">
   <div class="btn-group">
    <button type="button" class="btn btn-xlarge btn-primary-items" data-price="1.05">{{ item.name }}</button>
          </div>
            </div>
          </div>

JS

function MainController($scope) {
  $scope.items = [
     { name: "item1", price: "1.05" },
     { name: "item2", price: "2.05" },
     { name: "item3", price: "2.55" },
     { name: "item4", price: "2.65" },
     { name: "item5", price: "3.05" },
     { name: "item6", price: "4.95" },
     { name: "item7", price: "4.15" },
     { name: "item8", price: "1.15" },
     { name: "item9", price: "1.95" }
    ];
}
Источник
Другие вопросы по тегам