twitter-bootstrap – 我如何使用AngularJS ng-repeat与Twitter

发布时间：2020-12-18 00:06:45 所属栏目：安全来源：网络整理

导读：我如何使用AngularJS ng-repeat显示以下HTML(Twitter Bootstrap Scaffolding)？基本上，我需要关闭 / div，打印一个 hr，然后打开另一个 div class =“span4” div class="row" div class="span4" h3 Project A /h3 /div div class="span4" h3 Project B /h3

我如何使用AngularJS ng-repeat显示以下HTML(Twitter Bootstrap Scaffolding)？基本上，我需要关闭< / div>，打印一个< hr>，然后打开另一个< 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>

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

解决方法

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

<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很简单

# 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/

（编辑：李大同）

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