上一篇: css转换css过渡=跳过的帧[谷歌浏... 下一篇:css – 无法更改被访问的内容：在...

css – 使用ng-repeat迭代数组的块

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 使用ng-repeat迭代数组的块，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我的控制器从服务器抓取人：

$scope.people = [person1,person2,person3,person4,person5,...]

我的模板需要每行显示三个人.例如,如果它是一个表：

<table>
    <tr>
        <td>person1</td><td>person2</td><td>person3</td>
    </tr>
    <tr>
        <td>person4</td><td>person5</td><td>person6</td>
    </tr>
</table>

我不确定如何有条件地应用< tr>当$index％3 == 0或者最佳实践是什么时.我知道如何通过向控制器添加分组逻辑来实现这一点,但我认为最好将设计逻辑保留在控制器之外.

解决方法

没有现成的方法可以用表格来表达你的意思.做你想做的最简单的方法是使用固定宽度的div,这样它们会在三次之后自动换行.

这是一个例子：

HTML

<div ng-app="app">
    <div ng-controller="TableCtrl" class="my-table">
        <span ng-repeat="person in people" class="person">{{person}}</span>
    </div>
</div>

CSS

.my-table{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

.person{
    width: 100px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid black;
}

JavaScript的

var app = angular.module('app',[]);
app.controller('TableCtrl',function($scopE){

    $scope.people = ['Aaron','Abraham','Adam','Aristotel','Aziel','Azod','Azood'];

});

工作副本：http://jsfiddle.net/ZX43D/