Angular를 사용하는 방법JS ng-repeat은 Twitter Bootstrap의 비계를 가지고 있습니까?

Angular를 사용하는 방법JS ng-repeat은 Twitter Bootstrap의 비계를 가지고 있습니까?

Angular를 사용하는 방법JSng-repeat다음 HTML(Twitter Bootstrap Scalding)을 표시하는 방법기본적으로, 세 번째 레코드가 끝날 때마다</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="MyCtrl">
  <div ng-repeat="project in projects">
    <span ng-if="$index % 3 == 0">
      <hr />
      <div class="row">
        <h3 class="span4" ng-if="projects[$index+0]">{{projects[$index+0]}}</h3>
        <h3 class="span4" ng-if="projects[$index+1]">{{projects[$index+1]}}</h3>
        <h3 class="span4" ng-if="projects[$index+2]">{{projects[$index+2]}}</h3>
      </div>
    </span>
  </div>
</div>

이 방법은 예를 들어 7개의 데이터 항목이 있는 경우에도 작동합니다. 마지막 3개의 데이터에서는 항목 7만 표시되고 존재하지 않는 항목 8과 9는 표시되지 않습니다.

http://jsfiddle.net/4LhN9/68/

편집: ng-if & angular 1.2.12를 사용하도록 업데이트됨

좀 더 쉬운 답변에서 넘어갑니다.나는 원래 해결책이 빈 돔 요소 때문에 싫다.이것은 한 줄에 3개의 div를 위한 것입니다.

<div ng-controller="ModulesCtrl">
    <div class="row" ng-repeat="i in fields.range()">
        <div class="span4" ng-repeat="field in fields.slice(i,i+3)">
            <h2>{{field}}</h2>
        </div>
    </div>
</div>

FieldsCtrl($scope):

$scope.fields.range = function() {
    var range = [];
    for( var i = 0; i < $scope.fields.length; i = i + 3 )
        range.push(i);
    return range;
}

fields.length를 알고 있는 경우 fields.range() 대신 [0,3,6,9]를 사용할 수 있습니다.

보다 우아한 방법은 뷰 모델을 사용하여 청크 컬렉션을 제공한 다음 뷰가 다음과 같이 처리하도록 하는 것입니다.

<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>​

그리고 커피스크립트는 꽤 간단하다.

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

뷰 로직이 컨트롤러에 들어가지 않도록 하고 보다 재사용 가능한 솔루션을 제공하기 위해 어레이를 행 그룹으로 분할하는 커스텀필터를 작성할 수 있습니다.

angular.module('app').filter('group', function() {
    /**
     * splits an array into groups of the given size
     * e.g. ([1, 2, 3, 4, 5], 2) -> [[1, 2], [3, 4], [5]]
     */
    return function(array, groupSize) {
        return _.groupBy(array, function(val, index) {
            return Math.floor(index / groupSize);
        });
    };
});

보기:

<div class="row" ng-repeat="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>

hr을 포함하려면 ng-repeat 시작점과 끝점을 사용할 수 있습니다.

<div class="row" ng-repeat-start="group in projects | group:3">
   <div class="span4" ng-repeat="project in group">
      {{project}}
   </div>
</div>
<hr ng-repeat-end />

ng-sng-start 엔드 포인트와 ng-sng-snd-end 엔드 포인트는 이를 실현하는 편리한 방법입니다.

간단한 코드로 이어지죠

<div ng-controller="MyCtrl">
    <div ng-repeat-start="project in projects">
        <span>
            <div class="row">
                <h3 class="span4">{{project}}</h3>
            </div
        </span>
    </div>
    <hr ng-repeat-end ng-if="($index + 1) % 3 == 0" />
</div>

이 jsfiddle 참조

언급URL : https://stackoverflow.com/questions/11056819/how-would-i-use-angularjs-ng-repeat-with-twitter-bootstraps-scaffolding