Question

我正在使用ng-repeat将我的HTML代码迁移到Angular。 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有效载荷，它将具有Item Name＆amp;价格和我的代码应该生成相同的结构。

我的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" }
    ];

Answer 1

我试图在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" }
    ];
}

Answer 2

在将JSON响应传递给angular指令之前，您需要重新构建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 answer

Answer 3

使用CSS的简化示例

正如我在上面的评论中提到的，我认为实现你的＃34; Grid＆＃34;的最好方法是使用CSS。这最大限度地减少了控制器中的编码。这使您的控制器更加脱离设计。如果要更改网格中的项目数，则更改CSS，而不是模板和控制器。

另一个优点是，您现在可以使用CSS媒体查询并根据需要更改移动设备等的布局。

我选择的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;
}

Demo

使用嵌套的ng-Repeat生成HTML结构

3 个答案: