3개의 부트스트랩 열에서 AngularJS ng-repeat 데이터 정렬

AngularJS는 ng-repeat를 제공하여 데이터 배열을 기반으로 요소를 동적으로 생성합니다. 상당한 수의 요소를 처리할 때 요소를 열로 정렬하면 사용자 인터페이스와 가독성이 향상될 수 있습니다.

컨트롤러 기반 변환

선호되는 접근 방식은 데이터를 균등한 크기의 그룹으로 나누는 JavaScript의 청크 기능을 사용하는 컨트롤러:

function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i
변형된 ChunkedData는 다음과 같이 뷰에서 렌더링될 수 있습니다.

  
{{item}}
뷰 필터링(주의)
가능하더라도 필터를 사용하여 뷰에서 데이터를 청크하는 것은 데이터 바인딩 목적으로 권장되지 않습니다. 필터링된 보기 내에서 입력이 사용되면 불일치가 발생할 수 있습니다.
<div ng-repeat="row in ['a','b','c','d','e','f'] | chunk:3">
  <div class="column" ng-repeat="item in row">
    {{($parent.$index*row.length) $index 1}}. {{item}}
  </div>
</div>

세로 열

항목을 가로 대신 세로로 정렬하려면 다양한 청킹 방법을 사용할 수 있습니다.

function columnize(input, cols) {
  var arr = [];
  for(i = 0; i < input.length; i  ) {
    var colIdx = i % cols;
    arr[colIdx] = arr[colIdx] || [];
    arr[colIdx].push(input[i]);
  }
  return arr;
}

<div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{item}}
  </div>
</div>

CSS 열

세로 열을 만드는 또 다른 옵션은 CSS 열을 활용하는 것입니다.

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>