html – Angular.js使用引导和动态创建行

发布时间：2020-12-14 18:52:11 所属栏目：资源来源：网络整理

导读：我正在试图找出如何使用ng-repeat指令使用带有angular.js的行流动动态创建引导行div. 这是有棱角的： div ng-repeat="task in tasks" class="row-fluid" div class="span6 well"{{task.name}}/div /div 这不行.我想生成的bootstrap html是： http://jsfiddle

我正在试图找出如何使用ng-repeat指令使用带有angular.js的行流动动态创建引导行div.

这是有棱角的：

<div ng-repeat="task in tasks" class="row-fluid">
     <div class="span6 well">{{task.name}}</div>
 </div>

这不行.我想生成的bootstrap html是：

http://jsfiddle.net/YKkXA/2/

基本上我需要在ng-repeat里面做mod 2的索引,如果是0,关闭< / div>并创建一个新的< div class =“row-fluid”>.这怎么可能？

解决方法

这个想法是过滤您的项目,以便对它们进行分组,并进行第二个ngRepeat来迭代子项目.

首先,将该过滤器添加到您的模块中：

module.filter('groupBy',function() {
    return function(items,groupedBy) {
        if (items) {
            var finalItems = [],thisGroup;
            for (var i = 0; i < items.length; i++) {
                if (!thisGroup) {
                    thisGroup = [];
                }
                thisGroup.push(items[i]);
                if (((i+1) % groupedBy) === 0) {
                    finalItems.push(thisGroup);
                    thisGroup = null;
                }
            }
            if (thisGroup) {
                finalItems.push(thisGroup);
            }
            return finalItems;
        }
    };
});

在你的控制器中(因为如果你直接在模板中过滤,那么你将有一个$digest loop)：

function TaskCtrl() {
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup,2);
}

在你的.html中：

<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
    <div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!