Bootstrap을 사용하여 ng-repeat 데이터를 세 개의 열로 분할하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Bootstrap을 사용하여 ng-repeat 데이터를 세 개의 열로 분할하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-25 01:01:30

원래의

812명이 탐색했습니다.

How to Split ng-repeat Data into Three Columns Using Bootstrap?

부트스트랩을 사용하여 ng-repeat 데이터를 세 개의 열로 분할

AngularJS에서 ng-repeat를 사용할 때 데이터를 여러 열로 정렬하려는 경우가 많습니다. 이 기사에서는 Bootstrap을 사용하여 ng-repeat 데이터를 세 개의 열로 분할하는 다양한 방법을 살펴봅니다.

컨트롤러의 데이터 변환

가장 신뢰할 수 있는 접근 방식은 제어 장치. 이를 통해 청크 데이터의 새로운 배열을 생성하는 동안 원래 데이터 구조를 유지할 수 있습니다. 다음과 같은 기능을 사용할 수 있습니다.

<code class="javascript">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);

로그인 후 복사

뷰에서 청크 데이터를 반복합니다.

<code class="html"><div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{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>

로그인 후 복사

사용자 정의 함수

또는 균등하지 않은 목록을 수직으로 배포할 수 있습니다. 사용자 정의 기능 사용:

<code class="javascript">var data = ['a','b','c','d','e','f','g'];
$scope.columns = columnize(data, 3);
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>