我将如何将 AngularJS ng-repeat 与 Twitter Bootstrap 的脚手架一起使用? [英] How would I use AngularJS ng-repeat with Twitter Bootstrap's scaffolding?

查看：25
本文介绍了我将如何将 AngularJS ng-repeat 与 Twitter Bootstrap 的脚手架一起使用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我将如何使用 AngularJS ng-repeat 来显示以下 HTML(Twitter Bootstrap Scaffolding)?本质上，每三个记录我需要关闭 </div>，打印一个 <hr>，然后打开另一个 <div class="span4"> 

 
<div class="span4"><h3>项目A
<div class="span4"><h3>项目B

<div class="span4"><h3>项目C

<小时><div class="row"><div class="span4"><h3>项目 D

<div class="span4"><h3>实验室名称

<div class="span4"><h3>E项目

我为代码演示创建了一个小提琴.
http://jsfiddle.net/ADukg/261/

解决方案

更优雅的方式是使用视图模型提供一个分块的集合，然后让视图像处理它一样

项目 <input ng-model="projects"></input><小时/><div ng-repeat="一行行"><div ng-repeat="排中项目">项目 {{project}}
<小时/>
</div>

咖啡脚本非常简单

# 将数组分解成大小均匀的块.块 = (a,s)->如果 a.length == 0[]别的( a[i..i+s-1] for i in [0..a.length - 1 ] by s)@Controller = ($scope)->$scope.projects = "ABCDEF"$scope.$watch项目"，->$scope.rows = 块 $scope.projects.split(""), 3angular.bootstrap(document, []);

http://jsfiddle.net/ADukg/370/

How would I use AngularJS ng-repeat to display the following HTML (Twitter Bootstrap Scaffolding)? Essentially, every third record I need to close the </div>, print an <hr>, then open another <div class="span4"> 

    <div class="row">
      <div class="span4">
        <h3>
          Project A
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project B
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project C
        </h3>
      </div>
    </div>

    <hr>

    <div class="row">
      <div class="span4">
        <h3>
          Project D
        </h3>
      </div>
      <div class="span4">
        <h3>
          Lab Title
        </h3>
      </div>
      <div class="span4">
        <h3>
          Project E
        </h3>
      </div>
    </div>

I've created a fiddle for code demos.
http://jsfiddle.net/ADukg/261/

解决方案

A more elegant way is to use the view model to provide a chunked collection and then let the view handle it like

<div ng-controller="Controller">
    Projects <input ng-model="projects"></input>
    <hr/>
    <div ng-repeat="row in rows">
        <div ng-repeat="project in row">
            Projects {{project}}
        </div>
        <hr/>
    </div>
</div>​

and the coffeescript is pretty simple

# Break up an array into even sized chunks.
chunk = (a,s)->
    if a.length == 0
        []
    else               
        ( a[i..i+s-1] for i in [0..a.length - 1 ] by s)

@Controller = ($scope)->
    $scope.projects = "ABCDEF"

    $scope.$watch "projects", ->      
       $scope.rows = chunk $scope.projects.split(""), 3

angular.bootstrap(document, []);

​

http://jsfiddle.net/ADukg/370/

这篇关于我将如何将 AngularJS ng-repeat 与 Twitter Bootstrap 的脚手架一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆