부트스트랩을 사용하여 ng-timeout 데이터를 3개의 컬럼으로 분할하는 방법
나는 ng-repeat을 내 코드로 사용하고 있으며, ng-repeat을 기반으로 한 텍스트 박스의 'n' 번호를 가지고 있다.텍스트 상자를 열 세 개로 정렬하고 싶습니다.
이건 내 코드야
<div class="control-group" ng-repeat="oneExt in configAddr.ext">
{{$index+1}}.
<input type="text" name="macAdr{{$index+1}}"
id="macAddress" ng-model="oneExt.newValue" value=""/>
</div>
가장 신뢰성이 높고 기술적으로 올바른 접근법은 컨트롤러의 데이터를 변환하는 것입니다.다음은 간단한 청크 기능과 사용 방법입니다.
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에 의해 추적되지 않았기 때문에 반환값은 항상 이전과 다르게 표시됩니다.하려면 , 를 「불안정」필터로 합니다.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>
이 솔루션은 매우 간단합니다.
JSON:
[{id:"1",name:"testA"},{id:"2",name:"test B"},{id:"3",name:"test C"},{id:"4",name:"test D"},{id:"5",name:"test E"}]
HTML:
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="item in items" ng-switch on="$index % 3">
<td ng-switch-when="0">
{{items[$index].id}} {{items[$index].name}}
</td>
<td ng-switch-when="0">
<span ng-show="items[$index+1]">
{{items[$index+1].id}} {{items[$index+1].name}}
</span>
</td>
<td ng-switch-when="0">
<span ng-show="items[$index+2]">
{{items[$index+2].id}} {{items[$index+2].name}}
</span>
</td>
</tr>
</table>
</div>
데이터 조작이 필요 없는 깔끔하고 적응성이 뛰어난 솔루션:
HTML:
<div class="control-group" class="label"
ng-repeat="oneExt in configAddr.ext"
ng-class="{'new-row': startNewRow($index, columnBreak) }">
{{$index+1}}.
<input type="text" name="macAdr{{$index+1}}"
id="macAddress{{$index}}" ng-model="oneExt.newValue" />
</div>
CSS:
.label {
float: left;
text-align: left;
}
.new-row {
clear: left;
}
JavaScript:
$scope.columnBreak = 3; //Max number of colunms
$scope.startNewRow = function (index, count) {
return ((index) % count) === 0;
};
이는 표시하려는 데이터 배열을 조작할 필요 없이 데이터를 행과 열로 동적으로 렌더링하는 간단한 솔루션입니다.또한 브라우저 창의 크기를 조정하려고 하면 그리드가 screen/div 크기에 동적으로 적응하는 것을 볼 수 있습니다.
(또한 ng-repeat에서 동일한 ID로 여러 요소를 생성하려고 하기 때문에 ID에 {{$index}} 서픽스를 추가했습니다).
은 꽤 m59는 너무 좋아요.마음에 안 드는 점은 이 제품이div테이블의 데이터가 될 수 있는 것을 나타냅니다.
따라서 m59의 필터(위 답변)와 함께 표에 표시하는 방법을 설명합니다.
<table>
<tr class="" ng-repeat="rows in foos | chunk:2">
<td ng-repeat="item in rows">{{item}}</td>
</tr>
</table>
다음은 보다 간단한 방법입니다.
<table>
<tr ng-repeat="item in lists" ng-hide="$index%2!==0">
<td>
<label>{{ lists[$index].name}}</label>
</td>
<td ng-hide="!lists[$index+1]">
<label>{{ lists[$index+1].name}}</label>
</td>
</tr>
</table>
Cumulo Nimbus의 답변은 유용하지만 목록이 너무 길면 스크롤 바를 표시할 수 있는 div로 이 그리드를 포장하고 싶습니다.
위해서 저는 '아까보다 더하다'를 넣었습니다.style="height:200px; overflow:auto"테이블 주위에 있는 div로 이동하여 단일 열로 표시합니다.
어레이 길이 1로 동작합니다.
앱에서 사용할 수 있도록 기능이 있어 서비스에 저장합니다.
서비스:
app.service('SplitArrayService', function () {
return {
SplitArray: function (array, columns) {
if (array.length <= columns) {
return [array];
};
var rowsNum = Math.ceil(array.length / columns);
var rowsArray = new Array(rowsNum);
for (var i = 0; i < rowsNum; i++) {
var columnsArray = new Array(columns);
for (j = 0; j < columns; j++) {
var index = i * columns + j;
if (index < array.length) {
columnsArray[j] = array[index];
} else {
break;
}
}
rowsArray[i] = columnsArray;
}
return rowsArray;
}
}
});
컨트롤러:
$scope.rows = SplitArrayService.SplitArray($scope.images, 3); //im splitting an array of images into 3 columns
마크업:
<div class="col-sm-12" ng-repeat="row in imageRows">
<div class="col-sm-4" ng-repeat="image in row">
<img class="img-responsive" ng-src="{{image.src}}">
</div>
</div>
나의 접근 방식은 여러 가지가 뒤섞여 있었다.
내 목표는 화면 크기에 맞게 그리드를 만드는 것이었다.는 3번 을 원했어요.lg용), 2열(용):sm ★★★★★★★★★★★★★★★★★」md, 및의 경우는1 , 「 xs.
각도가 되다를 해서 다음과 함수를 .$window★★★★★★★★★★★★★★★★★★:
$scope.findColNumberPerRow = function() {
var nCols;
var width = $window.innerWidth;
if (width < 768) {
// xs
nCols = 1;
}
else if(width >= 768 && width < 1200) {
// sm and md
nCols = 2
} else if (width >= 1200) {
// lg
nCols = 3;
}
return nCols;
};
그리고 @Cumulo Nimbus가 제안한 수업을 이용했습니다.
.new-row {
clear: left;
}
div가 에는 div가 있습니다.ng-repeat , 을했습니다.resizable이 페이지에서 설명한 대로 지시문을 사용하여 창 크기가 조정될 때마다 각도가 조정되도록 합니다.$window이치노
궁극적으로, 나는 반복된 div에서 다음을 가지고 있다.
ng-repeat="user in users" ng-class="{'new-row': ($index % findColNumberPerRow() === 0) }"
이 접근법에 결함이 있으면 알려주세요.
도움이 되길 바랍니다.
부트스트랩이 권장하는 "clearfix" CSS를 사용한 간단한 트릭:
<div class="row">
<div ng-repeat-start="value in values" class="col-md-4">
{{value}}
</div>
<div ng-repeat-end ng-if="$index % 3 == 0" class="clearfix"></div>
</div>많은 장점: 효율적이고, 빠르고, Boostrap 권장사항을 사용하여 발생할 수 있는 $digest 문제를 방지하고, Angular 모델을 변경하지 않음
이 예에서는 외부 데이터에 두 열에 나열하려는 내부 배열이 포함된 중첩된 리피터를 생성합니다.이 개념은 3개 이상의 열에 대해 적용됩니다.
안쪽 열에서 한계에 도달할 때까지 "행"을 반복합니다.제한은 항목 배열의 길이를 원하는 열 수로 나누어 결정합니다. 이 경우 2로 나눕니다.분할 방식은 컨트롤러에 배치되어 현재 배열 길이를 매개 변수로 전달합니다.그런 다음 JavaScript 슬라이스(0, array.length / columnCount) 함수는 리피터에 제한을 적용합니다.
그런 다음 두 번째 열 리피터가 호출되어 두 번째 열에 배열의 후반부를 생성하는 슬라이스(array.length / columnCount, array.length)를 반복합니다.
<div class="row" ng-repeat="GroupAccess in UsersController.SelectedUser.Access" ng-class="{even: $even, odd: $odd}">
<div class="col-md-12 col-xs-12" style=" padding-left:15px;">
<label style="margin-bottom:2px;"><input type="checkbox" ng-model="GroupAccess.isset" />{{GroupAccess.groupname}}</label>
</div>
<div class="row" style=" padding-left:15px;">
<div class="col-md-1 col-xs-0"></div>
<div class="col-md-3 col-xs-2">
<div style="line-height:11px; margin-left:2px; margin-bottom:2px;" ng-repeat="Feature in GroupAccess.features.slice(0, state.DivideBy2(GroupAccess.features.length))">
<span class="GrpFeature">{{Feature.featurename}}</span>
</div>
</div>
<div class="col-md-3 col-xs-2">
<div style="line-height:11px; margin-left:2px; margin-bottom:2px;" ng-repeat="Feature in GroupAccess.features.slice( state.DivideBy2(GroupAccess.features.length), GroupAccess.features.length )">
<span class="GrpFeature">{{Feature.featurename}}</span>
</div>
</div>
<div class="col-md-5 col-xs-8">
</div>
</div>
</div>
// called to format two columns
state.DivideBy2 = function(nValue) {
return Math.ceil(nValue /2);
};
이것이 또 다른 관점에서 솔루션을 보는 데 도움이 되기를 바랍니다.(PS 이것은 저의 첫 번째 투고입니다! :-)
.row를 사용하지 않고 수정합니다.
<div class="col col-33 left" ng-repeat="photo in photos">
Content here...
</div>
및 css
.left {
float: left;
}
여기 그것을 하는 쉬운 방법이 있다.그것은 더 수동적이고 결국 엉망진창으로 끝나게 된다.이것은 추천하지 않습니다만, 도움이 될 수도 있습니다.
여기 바이올린 링크가 있습니다.http://jsfiddle.net/m0nk3y/9wcbpydq/
HTML:
<div ng-controller="myController">
<div class="row">
<div class="col-sm-4">
<div class="well">
<div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3)">
{{ person.name }}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)">
{{ person.name }}
</div>
</div>
</div>
<div class="col-sm-4">
<div class="well">
<div ng-repeat="person in people = data | limitTo:Math.ceil(data.length/3):Math.ceil(data.length/3)*2">
{{ person.name }}
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.Math = Math;
$scope.data = [
{"name":"Person A"},
...
];
});
이 설정에서는 마크업:/에 약간의 산술이 필요하므로 다음 행을 추가하여 산술이 필요합니다.$scope.Math = Math;
이 답변들은 모두 지나치게 조작된 것 같습니다.
가장 간단한 방법은 col-md-4 컬럼 부트스트랩에 입력 div를 설정하고 부트스트랩은 12컬럼 특성으로 인해 자동으로 3컬럼으로 포맷합니다.
<div class="col-md-12">
<div class="control-group" ng-repeat="oneExt in configAddr.ext">
<div class="col-md-4">
<input type="text" name="macAdr{{$index}}"
id="macAddress" ng-model="oneExt.newValue" value="" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" ng-repeat="remainder in [0,1,2]">
<ul>
<li ng-repeat="item in items" ng-if="$index % 3 == remainder">{{item}}</li>
</ul>
</div>
</div>
m59의 매우 좋은 답변을 바탕으로 합니다.모델 입력이 변경되면 흐릿해지므로 한 번에 한 글자만 변경할 수 있습니다.이것은 오브젝트가 필요한 모든 사용자의 오브젝트 목록에 대한 새로운 것입니다.
EDIT Updated를 통해 한 페이지에서 여러 필터를 처리합니다.
app.filter('partition', function() {
var cache = {}; // holds old arrays for difference repeat scopes
var filter = function(newArr, size, scope) {
var i,
oldLength = 0,
newLength = 0,
arr = [],
id = scope.$id,
currentArr = cache[id];
if (!newArr) return;
if (currentArr) {
for (i = 0; i < currentArr.length; i++) {
oldLength += currentArr[i].length;
}
}
if (newArr.length == oldLength) {
return currentArr; // so we keep the old object and prevent rebuild (it blurs inputs)
} else {
for (i = 0; i < newArr.length; i += size) {
arr.push(newArr.slice(i, i + size));
}
cache[id] = arr;
return arr;
}
};
return filter;
});
사용법은 다음과 같습니다.
<div ng-repeat="row in items | partition:3:this">
<span class="span4">
{{ $index }}
</span>
</div>
저는 부트스트랩과 angularjs는 처음이지만, 이렇게 하면 Array per 4 items를 하나의 그룹으로 만들 수 있고, 결과는 거의 3컬럼이 됩니다.이 트릭에서는 부트스트랩 브레이크라인 원리를 사용합니다.
<div class="row">
<div class="col-sm-4" data-ng-repeat="item in items">
<div class="some-special-class">
{{item.XX}}
</div>
</div>
</div>
Lodash에는 청크 메서드가 내장되어 있어 개인적으로 사용하고 있습니다.https://lodash.com/docs#chunk
이를 바탕으로 컨트롤러 코드는 다음과 같습니다.
$scope.groupedUsers = _.chunk( $scope.users, 3 )
코드 표시:
<div class="row" ng-repeat="rows in groupedUsers">
<div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>
다른 있다width:33.33%; float:left디브하다
<div ng-repeat="right in rights" style="width: 33.33%;float: left;">
<span style="width:60px;display:inline-block;text-align:right">{{$index}}</span>
<input type="number" style="width:50px;display:inline-block" ">
</div>
같은 케이스로, 3열씩의 표시 그룹을 만들고 싶다고 생각하고 있었습니다.다만, 부트스트랩을 사용하고 있었지만, 이러한 그룹을 다른 부모 div로 분리하려고 했습니다.그리고 나는 일반적으로 유용한 것을 만들고 싶었다.
는 그것을 했다.ng-repeat음음음같 뭇매하다
<div ng-repeat="items in quotes" ng-if="!($index % 3)">
<div ng-repeat="quote in quotes" ng-if="$index <= $parent.$index + 2 && $index >= $parent.$index">
... some content ...
</div>
</div>
이를 통해 여러 개의 상위 기호로 구분하여 다른 열 수로 쉽게 변경할 수 있습니다.
Angular 7(및 그 이상 버전)을 원하는 사용자를 위해 어플리케이션 중 하나에서 사용한 예를 다음에 나타냅니다.
HTML:
<div class="container-fluid">
<div class="row" *ngFor="let reports of chunkData; index as i">
<div *ngFor="let report of reports" class="col-4 col-sm-4"
style="border-style:solid;background-color: antiquewhite">{{report}}</div>
</div>
</div>.TS 파일
export class ConfirmationPageComponent implements OnInit {
chunkData = [];
reportsArray = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6"];
constructor() {}
ngOnInit() {
this.chunkData = this.chunk(this.reportsArray, 3);
}
chunk(arr, size) {
var newArr = [];
for (var i = 0; i < arr.length; i += size) {
newArr.push(arr.slice(i, i + size));
}
return newArr;
}
}데이터베이스에서 반복하는 항목의 수에 따라 동적으로 새 열/행을 만들 수 있는 탁월한 솔루션입니다.꽝!
이것은 컬럼에 1, 2, 3을 넣는 방법이라는 원래의 질문에 대한 답입니다.– 2014년 2월 8일 13:47에 kuppu에 의해 질문됨
angularjs 코드:
function GetStaffForFloor(floor) {
var promiseGet = Directory_Service.getAllStaff(floor);
promiseGet.then(function (pl) {
$scope.staffList = chunk(pl.data, 3); //pl.data; //
},
function (errorOD) {
$log.error('Errored while getting staff list.', errorOD);
});
}
function chunk(array, columns) {
var numberOfRows = Math.ceil(array.length / columns);
//puts 1, 2, 3 into column
var newRow = []; //array is row-based.
for (var i = 0; i < array.length; i++) {
var columnData = new Array(columns);
if (i == numberOfRows) break;
for (j = 0; j < columns; j++)
{
columnData[j] = array[i + numberOfRows * j];
}
newRow.push(columnData);
}
return newRow;
////this works but 1, 2, 3 is in row
//var newRow = [];
//for (var i = 0; i < array.length; i += columns) {
// newRow.push(array.slice(i, i + columns)); //push effectively does the pivot. array is row-based.
//}
//return newRow;
};
코드 표시(주의: 부트스트랩 3 사용):
<div class="staffContainer">
<div class="row" ng-repeat="staff in staffList">
<div class="col-md-4" ng-repeat="item in staff">{{item.FullName.length > 0 ? item.FullName + ": Rm " + item.RoomNumber : ""}}</div>
</div>
</div>
이 코드는 요소를 lg 및 md 모드에서 3개의 컬럼, sm 모드에서 2개의 컬럼, xs 모드에서 1개의 컬럼으로 정렬하는 데 도움이 됩니다.
<div class="row">
<div ng-repeat="oneExt in configAddr.ext">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
{$index+1}}.
<input type="text" name="macAdr{{$index+1}}"
id="macAddress" ng-model="oneExt.newValue" value=""/>
</div>
</div>
언급URL : https://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap
'programing' 카테고리의 다른 글
| Android에서 Post 매개 변수를 사용하여 HttpClient 및 HttpPost 사용 (0) | 2023.02.28 |
|---|---|
| Qt 4.7에서 JSON을 해석하는 가장 쉬운 방법 (0) | 2023.02.28 |
| tsconfig 옵션 "lib"의 기능은 무엇입니까? (0) | 2023.02.28 |
| AngularJS 디렉티브 컨트롤러에는 부모 디렉티브 컨트롤러가 필요합니까? (0) | 2023.02.28 |
| 리액트 훅은 대상 컴포넌트를 어떻게 결정합니까? (0) | 2023.02.28 |