我将如何使用AngularJS NG重复使用Twitter的引导的脚手架? [英] How would I use AngularJS ng-repeat with Twitter Bootstrap's scaffolding?
本文介绍了我将如何使用AngularJS NG重复使用Twitter的引导的脚手架?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将如何使用AngularJS NG-重复
来显示以下HTML(Twitter的引导脚手架)?从本质上讲,每个第三个记录,我需要关闭< / DIV>
,打印< HR>
,然后打开另一个< DIV CLASS =span4>
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>
我已经为code演示小提琴。结果
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>
和CoffeeScript的将是pretty简单
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重复使用Twitter的引导的脚手架?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文