가장 신뢰할 수 있고 기술적으로 올바른 접근 방식은 컨트롤러의 데이터를 변환하는 것입니다. 다음은 간단한 청크 기능과 사용법입니다.
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);
그러면보기는 다음과 같습니다.
<div class="row" ng-repeat="rows in chunkedData">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
에 입력이있는 경우 ng-repeat데이터가 수정되거나 제출시 어레이를 실행 취소 / 재결합 할 수 있습니다. $watch데이터를 항상 병합 된 원본 형식으로 사용할 수 있도록 에서 표시되는 방법은 다음과 같습니다 .
$scope.$watch('chunkedData', function(val) {
$scope.data = [].concat.apply([], val);
}, true); // deep watch
많은 사람들이 필터를 사용하여보기에서이를 수행하는 것을 선호합니다. 이것은 가능하지만 표시 목적으로 만 사용해야합니다! 이 필터링 된보기 내에 입력을 추가하면 해결할 수 있지만 예쁘거나 신뢰할 수없는 문제가 발생합니다 .
이 필터의 문제점은 매번 새로운 중첩 배열을 반환한다는 것입니다. Angular는 필터의 반환 값을 감시합니다. 필터가 처음 실행될 때 Angular는 값을 알고 변경이 완료되었는지 확인하기 위해 다시 실행합니다. 두 값이 동일하면주기가 종료됩니다. 그렇지 않은 경우 필터는 동일해질 때까지 반복해서 실행되거나 Angular는 무한 다이제스트 루프가 발생하고 종료됨을 인식합니다. 새로운 중첩 배열 / 객체는 이전에 Angular에서 추적되지 않았기 때문에 항상 반환 값이 이전과 다른 것으로 간주됩니다. 이러한 "불안정한"필터를 수정하려면 필터를 memoize함수로 래핑해야합니다 . lodash가 memoize기능을하고 lodash의 최신 버전은 또한 포함chunk 기능을, 그래서 우리는 매우 간단하게 사용하여이 필터를 만들 수 있습니다npm모듈과 함께 스크립트를 컴파일 browserify또는 webpack.
기억하십시오 : 표시 만! 입력을 사용하는 경우 컨트롤러에서 필터링하십시오!
lodash를 설치합니다.
npm install lodash-node
필터를 만듭니다.
var chunk = require('lodash-node/modern/array/chunk');
var memoize = require('lodash-node/modern/function/memoize');
angular.module('myModule', [])
.filter('chunk', function() {
return memoize(chunk);
});
다음은이 필터를 사용한 샘플입니다.
<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>
수직으로 항목 주문
1 4
2 5
3 6
수평 (왼쪽에서 오른쪽으로)이 아닌 수직 열 (위에서 아래로 나열)과 관련하여 정확한 구현은 원하는 의미에 따라 다릅니다. 고르지 않게 분할 된 목록은 다른 방식으로 배포 될 수 있습니다. 한 가지 방법은 다음과 같습니다.
<div ng-repeat="row in columns">
<div class="column" ng-repeat="item in row">
{{item}}
</div>
</div>
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 열 을 사용하는 것입니다 .
.columns {
columns: 3;
}
<div class="columns">
<div ng-repeat="item in ['a','b','c','d','e','f','g']">
{{item}}
</div>
</div>
