angular.js有条件的标记在NG-重复 [英] angular.js conditional markup in ng-repeat

问题描述

我使用angular.js和（对于参数的缘故）引导。现在我需要遍历的东西，并在行显示它们：

I'm using angular.js and (for the sake of argument) bootstrap. Now I need to iterate on "things" and display them in ''rows'' :

<div class="row">
  <div class="span4">...</div>
  <div class="span4">...</div>
  <div class="span4">...</div>
</div>
<div class="row">
  etc...

现在，我怎么能收我的 .row DIV与角每三件事？我试过的UI如果从角度的用户界面，但即使没有做到这一点。

Now, how can I close my .row div on every third thing with angular? I tried ui-if from angular-ui but even that doesn't make it.

如果我是使用服务器端渲染，我会做这样的事情（JSP这里的语法，但无所谓）：

If I were to use server-side rendering, I would do something like this (JSP syntax here, but does not matter) :

<div class="row>
  <c:forEach items="${things}" var="thing" varStatus="i">
    <div class="span4">
        ..
    </div>
  <%-- Here is the trick:--%>
  <c:if test="${i.index % 3 == 2}">
          </div><div class="row">
  </c:if>
  </c:forEach>
</div>

请注意，我需要真正在这里改变DOM，而不仅仅是CSS的隐藏要素。我试图对重复的 .row 和 .span4 div的，有没有效果。

Note that I need to actually alter the DOM here, not just css-hiding elements. I tried with the repeat on the .row and .span4 divs, with no avail.

推荐答案

似乎不仅没有角度变化一点在1.2，但有一个更好的方法。我创建了两个过滤器。我试图将它们合并成一个，但得到消化的错误。这里有两个过滤器：

Edit Nov 12, 2013

It seems that not only did angular change a little in 1.2, but that there is an even better method. I've created two filters. I tried to combine them into one but got digest errors. Here are the two filters:

.filter("mySecondFilter", function(){
    return function(input, row, numColumns){
        var returnArray = [];
        for(var x = row * numColumns; x < row * numColumns + numColumns; x++){
            if(x < input.length){
                returnArray.push(input[x]);                    
            }
            else{
                returnArray.push(""); //this is used for the empty cells
            }
        }
        return returnArray;   
    }
})
.filter("myFilter", function(){
    return function(input, numColumns){
        var filtered = [];
        for(var x = 0; x < input.length; x++){
            if(x % numColumns === 0){
                filtered.push(filtered.length);
            }
        }
        return filtered;
    }
});

而现在的HTML将是这样的：

And now the html will look like this:

<table border="1">
     <tr data-ng-repeat="rows in (objects | myFilter:numColumns)">
          <td data-ng-repeat="column in (objects | mySecondFilter:rows:numColumns)">{{ column.entry }}</td>
     </tr>  
</table>

的jsfiddle ： http://jsfiddle.net/W39Q2/

修改二零一三年九月二十零日

虽然有很多，需要动态列，我想出了一个更好的方法，数据的工作。

While working with lots of data that needed dynamic columns I've come up with a better method.

HTML

<table border="1">
    <tr data-ng-repeat="object in (objects | myFilter:numColumns.length)">
        <td data-ng-repeat="column in numColumns">{{ objects[$parent.$index * numColumns.length + $index].entry }}</td>
    </tr>  
</table>

使用Javascript：

Javascript:

$scope.objects = [ ];
for(var x = 65; x < 91; x++){
    $scope.objects.push({
        entry: String.fromCharCode(x)
    });
}

$scope.numColumns = [];
$scope.numColumns.length = 3;

新的过滤器：

.filter("myFilter", function(){
    return function(input, columns){
        var filtered = [];
        for(var x = 0; x < input.length; x+= columns){
             filtered.push(input[x]);   
        }
        return filtered;
    }
});

这使得它是动态的。要更改列只是改变numColumns.length。在JS拨弄你可以看到我已经连接起来，以一个下拉列表。

This allows it to be dynamic. To change the columns just change the numColumns.length. In the js fiddle you can see I've wired it up to a dropdown.

的jsfiddle ： http://jsfiddle.net/j4MPK/

您的HTML标记看起来像这样：

Your html markup would look like this:

<div data-ng-repeat="row in rows">
    <div data-ng-repeat="col in row.col">{{col}}</div>
</div>

然后，你可以做一个变量在你的控制器像这样：

And then you could make a variable in your controller like so:

$scope.rows = [
    {col: [ 1,2,3,4 ]},
    {col: [ 5,6,7 ]},
    {col: [ 9,10,11,12 ]}
]; 

这样，您就可以拥有任意数量需要的列。

This way, you can have any number of columns you want.

的jsfiddle http://jsfiddle.net/rtCP3/39/

修改我修改了小提琴现在支持有对象的平面数组：

Edit I've modified the fiddle to now support having a flat array of objects:

的jsfiddle： http://jsfiddle.net/rtCP3/41/

该HTML现在看起来是这样的：

The html now looks like this:

<div class="row" data-ng-repeat="row in rows">
    <div class="col" data-ng-repeat="col in cols">
        {{objects[$parent.$index * numColumns + $index].entry}}
    </div>
</div>  

然后在控制器我有：

And then in the controller i have:

$scope.objects = [
    {entry: 'a'},
    {entry: 'b'},
    {entry: 'c'},
    {entry: 'd'},
    {entry: 'e'},
    {entry: 'f'},
    {entry: 'g'},
    {entry: 'h'}    
];

$scope.numColumns = 3;
$scope.rows = [];
$scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
$scope.cols = [];
$scope.cols.length = $scope.numColumns;

在$ scope.numColumns变量用于指定每一行中想要多少列。

The $scope.numColumns variable is used to specify how many columns you want in each row.

要处理动态数组大小的变化，把数组的长度手表（不是整个数组，这将是redundent）

To handle dynamic array size changes, put a watch on the length of the array (not the whole array, that would be redundent)

$scope.numColumns = 3;  
$scope.rows = [];    
$scope.cols = [];    
$scope.$watch("objects.length", function(){
    $scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
    $scope.cols.length = $scope.numColumns;        
});

的jsfiddle ： http://jsfiddle.net/rtCP3/45/

这篇关于angular.js有条件的标记在NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！