AngularJS에서 Bootstrap을 사용하여 ng-repeat 데이터를 열에 배포하는 방법은 무엇입니까?

부트스트랩을 사용하여 ng-Repeat 데이터를 열에 분산

AngularJS에서는 반복적인 데이터 작업을 할 때 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);

이 데이터는 다음과 같이 중첩된 ng-repeat를 사용하여 렌더링될 수 있습니다.

<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="html"><div ng-repeat="row in columns">
  <div class="column" ng-repeat="item in row">
    {{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;
}

CSS 열

또 다른 멋진 솔루션은 CSS 열을 활용하는 것입니다.

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

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

위 내용은 AngularJS에서 Bootstrap을 사용하여 ng-repeat 데이터를 열에 배포하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!