angularjs - 带有新换行符的水平 ng-repeat(er)

Question

使用 Bootstrap 和 AngularJS，有没有办法为每组ng-repeat元素水平地添加一个新行？

我一直在ng-class努力实现这一点Fiddle，但问题是我无法在初始行 div 中获得浮动左 div ...... ?

这是我的代码（上面小提琴链接中的实时示例）：

<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div ng-repeat="num in numbers" 
            ng-class="{'row': ($index)%2==0, 'col-md-6': ($index)%2!=0}">
            <div ng-class="{'col-md-6': ($index)%2==0}">
                {{num}}
            </div>
        </div>
    </div>
</body>

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', function ($scope) {
        $scope.numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
});

.row {
    clear: both;
    width: 100%;
    border: 1px solid red;
}
.col-md-6 {
    width: 50%;
    float: left;
    border: 1px solid blue;
}

score 9 · Accepted Answer

如果您正在使用 Bootstrap 3 和 AngularJS，您可以声明一个新过滤器，该过滤器将返回一个子数组切片数组，然后执行两次 ng-repeat。

它看起来像这样：

  <div class="row" ng-repeat="row in filtered = (arr | splitArrayFilter:3)">
        <div class="col-md-4" ng-repeat="n in row">
          <h3>{{n}}</h3>
        </div>
  </div>

app.filter('splitArrayFilter', function() {
  return function(arr, lengthofsublist) {
    if (!angular.isUndefined(arr) && arr.length > 0) {
      var arrayToReturn = [];  
      var subArray=[]; 
      var pushed=true;      
      for (var i=0; i<arr.length; i++){
        if ((i+1)%lengthofsublist==0) {
          subArray.push(arr[i]);
          arrayToReturn.push(subArray);
          subArray=[];
          pushed=true;
        } else {
          subArray.push(arr[i]);
          pushed=false;
        }
      }
      if (!pushed)
        arrayToReturn.push(subArray);

      console.log(JSON.stringify(arrayToReturn));
      return arrayToReturn; 
    }
  }
});

您可以在此处的 Plunker 上找到它：http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview由于某种原因，plunker 中的视图不支持引导 3 列，但如果您在嵌入式视图或浏览器中打开它，您可以看到它的工作原理。

score 6 · Accepted Answer

你在做什么很聪明ng-class。我从来没有想过%2在表达式中使用。

但为了将来参考，有一种更简单的方法可以实现这一点：ng-class-even和ng-class-odd. 它与您正在做的事情相同，但更简洁：

<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
    {{num}}
</div>

但这并不能解决您的问题。如果我理解正确，您需要一行，该行中有两列。我能想到的最简单的方法是拆分数组。将重复放在上div，然后在 2span内放置 2 div。我认为您最初遇到的问题之一是您重复了一个div，并试图将该block元素视为inline

控制器

myApp.controller('MyCtrl', function ($scope) {
    $scope.evens = ["2","4","6","8","10","12","14"];
    $scope.odds = ["1","3","5","7","9","11","13"];
});

HTML

<div ng-controller="MyCtrl">
    <div ng-repeat="odd in odds" class="row">
        <span class="span3">{{odd}}</span>
        <span class="span2">{{evens[$index]}}</span>
    </div>
</div>

小提琴

由于您使用的是 1.1.5 版，这也为您打开了一条新指令：ng-if！你也可以ng-switch用来做一些条件逻辑显示。

您没有在小提琴中包含引导程序，由于某种原因，我无法让 jsFiddle 显示引导程序。所以我创建了一些类似于引导程序的临时 CSS 类class="span"

score 3 · Accepted Answer

无需添加 .row 类..我这样做了：

HTML：

<div ng-repeat="product in allProducts">
  <div class="my-col-50">
    <h1>{{product.title}}</h1>
  </div>
</div>

CSS：

.my-col-50{float:left;width:50%;}

它的工作就像一个魅力。

score 2 · Accepted Answer

I tried two of the suggestions given here... the one by yshaool works fine but like i commented on it give me that infinite loop error.

Then I tried something like below:

<div class="row" ng-repeat="row in split($index, 3, row.Attempts)">
      <div class="col-md-4" ng-repeat="attempt in row">
          <div>Attempt {{row.AttemptNumber}}</div>
          <div>{{row.Result}}</div>
      </div>              
</div>

and the function:

$scope.split = function (index, length, attempts) {

       var ret = attempts.slice(index * length, (index * length) + length);
       console.log(JSON.stringify(ret));
       return ret;

}

was going somewhere with that when i realized that it could be as simple as

<div ng-repeat="attempt in row.Attempts">
      <div class="col-md-4">
          <div>Attempt {{attempt.AttemptNumber}}</div>
          <div>{{attempt.Result}}</div>
     </div>                    
</div>

using "col-md-4" does the trick as I only need to split using three columns per row.. (let bootstrap do the work!) anyway the other answers here were really useful...

score 2 · Accepted Answer

虽然这不是这样做的“正确”方式，但有一种方法可以使用 CSS 来实现。

例如，这是一个 3 列布局：

HTML：

<div class="row">
    <div ng-repeat="(key, pod) in stats.pods" class="pod-wrap">
        <div ng-if="objectCheck(pod) == false" class="col-md-4 col-sm-4 pod">
            <div>
                <h2 ng-bind="key"></h2>
                <p class="total" ng-bind="pod | number"></p>
            </div>
        </div>

        <div ng-if="objectCheck(pod) == true" class="col-md-4 col-sm-4 pod">
            <div>
                <h2 ng-bind="key"></h2>

                <div ng-repeat="(type, value) in pod track by $index">
                    <p class="status"><% type %> <small><% value %></small></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.pod-wrap:nth-of-type(3n):after {
    display: table;
    content: '';
    clear: both;
}

score 1 · Accepted Answer

根据模板中所需的列数，在控制器中创建原始数据源的块。

$scope.categories = data //contains your original data source;
$scope.chunkedCategories = [] //will push chunked data into this;
//dividing into chunks of 3 for col-4. You can change this
while ($scope.categories.length > 0)
 $scope.chunkedCategories.push($scope.categories.splice(0, 3));

在您的模板中，您现在可以执行以下操作

<div class="row" ng-repeat="categories in chunkedCategories">
 <div class="col-xs-4" ng-repeat="category in categories">
  <h2>{{category.title}}</h2>
 </div>         
</div>

score 1 · Accepted Answer

我的方法是使用由 AngularJS 在 ng-repeat 指令中创建和更新的 $index 变量来触发对 CSS clearfix hack 的调用，该 hack 反过来又重置为新行。

我正在使用以下版本：AngularJS 1.5.5 和 Bootstrap 3.3.4

<!-- use bootstrap's grid structure to create a row -->
<div class="row">

    <!-- Cycle through a list: -->
    <!-- use angular's ng-repeat directive -->
    <div ng-repeat="item in itemList">

        <!-- Start a new row: -->
        <!-- use the css clearfix hack to reset the row -->
        <!-- for every item $index divisible by 3. -->
        <!-- note that $index starts at 0. -->
        <div ng-if="$index % 3 == 0" class="clearfix"></div>

        <!-- Create a column: -->
        <!-- since we want 3 "item columns"/row, -->
        <!-- each "item column" corresponds to 4 "Bootstrap columns" -->
        <!-- in Bootstrap's 12-column/row system -->
        <div class="col-sm-4">
            {{item.name}}
        </div>
    </div>
</div>

score 0 · Accepted Answer

为了保持解决方案引导程序的格式，我使用 ng-class 解决了这个问题

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

angularjs - 带有新换行符的水平 ng-repeat(er)

8 回答 8

Related

Reference