AngularJS ng-repeat 데이터를 Bootstrap 열 3개에 어떻게 정렬할 수 있나요?

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

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

컨트롤러 기반 변환

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

<code class="js">function chunk(arr, size) {
  var newArr = [];
  for (var i=0; i<arr.length; i+=size) {
    newArr.push(arr.slice(i, i+size));
  }
  return newArr;
}

$scope.chunkedData = chunk(myData, 3);

변형된 ChunkedData는 다음과 같이 뷰에서 렌더링될 수 있습니다.

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div></code>

뷰에서 필터링 (주의)

가능하더라도 필터를 사용하여 뷰의 데이터를 청크하는 것은 데이터 바인딩 목적으로 권장되지 않습니다. 필터링된 보기 내에서 입력을 사용하면 불일치가 발생할 수 있습니다.

<code class="html"><pre class="brush:php;toolbar:false">
<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>

세로 열

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

<code class="js">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;
}

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

CSS 열

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

<code class="css">.columns {
  columns: 3;
}</code>

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

위 내용은 AngularJS ng-repeat 데이터를 Bootstrap 열 3개에 어떻게 정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!