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


122

내 코드와 함께 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>

1
그래서 당신이 9 (9)를 가지고 있다고 가정하면 1,2,3을 행이나 열에 원합니까?
Gabriele Petrioli 2014

답변:


254

가장 신뢰할 수 있고 기술적으로 올바른 접근 방식은 컨트롤러의 데이터를 변환하는 것입니다. 다음은 간단한 청크 기능과 사용법입니다.

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함수로 래핑해야합니다 . lodashmemoize기능을하고 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>

당신의 도움을 주셔서 감사합니다. 그러나 각도에서 ui-chart와 함께 carousel을 사용하면 차트를 그릴 수 없습니다. bt carousel이 제대로 작동합니다. 내 코드는 <carousel interval = "myInterval"> <slide ng-repeat = "milestone in mileStone | split : 4"active = "slide.active"> <div class = "col-md-3"ng-repeat = "입니다. 마일스톤의 마일스톤 1 "> <div style ="text-align : center; "> <div ui-chart ="data "chart-options ="chartOptions "> </ div> </ div> </ div> </ slide > </ carousel> 그리고 내 범위 변수를 마일스톤 JSON 데이터로 초기화했습니다.
kuppu

1
@ m59 현재이 함수는 첫 번째 행 a b c두 번째 행에 데이터를 표시합니다 d e f. 두 번째 열과 세 번째 열의 a b 첫 번째 열에 표시 할 수 있습니까 ? 감사합니다c de f

1
@ Ifch0o1 그렇다면 맞을 것 [].concat.call([], val)입니다. 무엇을하는지 고려해야합니다 apply. val는 배열의 배열이며, 그 안에있는 각 배열을에 인수로 전달하려고 concat합니다. 나는 당신이의 맥락에 초점을 맞추고 있다고 생각합니다 []. 우리가 원하는 것은 [].concat(val[1], val[2], val[3], etc), 그래서 우리는 필요합니다apply([], val)
m59

1
@bahadir 더 명확하게 답변을 업데이트했습니다. []vs [[]]및을 반환하는 필터를 만들면 어떻게되는지 확인하십시오 [{}]. 중첩 된 배열 / 객체는 Angular가 모든 filter에서 다른 결과를 보게 만들고 결과가 동일하게 유지 (안정화)되도록 계속 반복합니다.
m59

1
당신은 정말 댓글을 스팸하고 있습니다 :) 직접 시도해보십시오. var x = [1,2,3]; var y = [1,2,3]; console.log(x === y);심층 검사는 문자열을 문자열 화하고 비교하는 것을 의미합니다. 이는 객체를 문자열화할 수 없기 때문에 위험하거나 각 속성을 개별적으로 재귀 적으로 확인하는 것입니다. Angular 필터를 위해 구현할 있다고 생각 하지만 그렇지 않은 이유가 있다고 확신합니다. 아마도 그들은 구조 변경에 대한 완전한 점검이 아니라 데이터 세트의 간단한 수정을위한 필터를 주로 의도했기 때문일 것입니다.
m59

64

이 솔루션은 매우 간단합니다.

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>

FIDDLE의 데모

여기에 이미지 설명 입력


3
최고의 답변! 그리고 네이티브 디렉티브로 필요한 것을하십시오! 축하합니다!
Renan Franca 2015

1
이 솔루션은 작동하지만, 지금까지 베스트 프랙티스, 당신은 아마 :) 마크 업에 레이아웃을 정의하는 테이블을 사용해서는 안 가서
데이브 쿠퍼

2
@DaveCooper가 언급했듯이 다음은 테이블이없는 대체 레이아웃입니다 : plnkr.co/edit/81oj8mHaNyfQpCmRBWO4?p=preview . 표로 작성된 데이터에 대한 테이블을 고려하십시오. 그렇지 않으면 모바일 장치 및 가변 화면 크기에 더 적합한 레이아웃입니다.
Zymotik

1
이것이 최고의 솔루션입니다. 새 프레임 워크를 사용할 때 모든 단점을 찾는 데 시간이 걸리지 만 ng-switch는 신의 선물입니다
Zoran

테이블 대신 div를 사용하는 경우 ng-switch-when="0" 대신 div를 사용하는 경우 3 개 항목 모두가 아닌 외부 div에 한 번 있습니다.
Hans Wouters 2017 년

19

데이터 조작이 필요없는 깔끔하고 적응 가능한 솔루션 :

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;
}

자바 스크립트 :

$scope.columnBreak = 3; //Max number of colunms
$scope.startNewRow = function (index, count) {
    return ((index) % count) === 0;
};

이것은 표시하려는 데이터 배열을 조작 할 필요없이 데이터를 행과 열로 동적으로 렌더링하는 간단한 솔루션입니다. 또한 브라우저 창의 크기를 조정하면 그리드가 화면 / div의 크기에 동적으로 조정되는 것을 볼 수 있습니다.

(그렇지 않으면 ng-repeat가 동일한 ID로 여러 요소를 만들려고 시도하기 때문에 {{$ index}} 접미사를 ID에 추가했습니다.)

유사한 작업 예


1
OP가 Twitter Bootstrap 행 / 열에 대한 마크 업을 원한다고 생각하지만 이것은 누군가에게 도움이 될 수 있습니다. 그러나 답변에 코드와 설명을 넣어야합니다. 링크 전용 답변이 제거됩니다.
m59

@ m59 업데이트 된 답변. 제안 해 주셔서 감사합니다
Cumulo Nimbus

1
Big +1 은 데이터 조작이 필요하지 않습니다 . 이것은 내 Bootstrap 모달이 그리 길지 않도록 ng-repeat를 사용하여 범위의 데이터를 2 열로 분리하려는 내 요구에 완벽하게 작동했습니다! 이것이 구현하는 것이 얼마나 간단한 지 놀랐습니다! <span ng-repeat="z in waiverModalLinks" ng-class="{'new-row':startNewRow($index, columnBreak)}" class="{{z.id}}"><a href="{{z.link}}{{z.title}}">{{z.title}}</a></span>그것은`modal-body '안에 있습니다.
Christine268

15

m59의 대답은 꽤 좋습니다. 내가 싫어하는 한 가지는div 잠재적으로 테이블의 데이터가 될 수있는 것에 s를 입니다.

따라서 m59의 필터 (위의 답변)와 함께 표에 표시하는 방법은 다음과 같습니다.

<table>
    <tr class="" ng-repeat="rows in foos | chunk:2">
        <td ng-repeat="item in rows">{{item}}</td>
    </tr>
</table>

7

다음은 더 간단한 방법입니다.

<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 개만있는 경우 첫 번째 행 자체를 표시하지 않습니다. 다음은이 변화를 해결하기 ng-hide="$index%2!==0"
아누 즈 펜디 교수

4

기능이 있고 서비스에 저장하여 앱 전체에서 사용할 수 있습니다.

서비스:

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>

이것은 멋지지만 orderBy 또는 filter와 같은 다른 필터를 사용할 때는 도움이되지 않습니다.
Robbie Smith

2

내 접근 방식은 여러 가지가 혼합되어있었습니다.

내 목표는 화면 크기에 맞춰 그리드를 만드는 것이 었습니다. 나는 대한 3 열을 원 lg2 열, smmd, 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 에서이 페이지에 설명 된대로 지시문을 ng-repeat추가하여 창 크기를 조정할 때마다 각도 서비스가 새 값으로 업데이트됩니다.resizable$window

궁극적으로 반복되는 div에는 다음이 있습니다.

ng-repeat="user in users" ng-class="{'new-row': ($index % findColNumberPerRow() === 0) }"

이 접근 방식의 결함을 알려주십시오.

도움이되기를 바랍니다.


2

Bootstrap에서 권장하는 "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 모델을 변경하지 않습니다.


1

이 예제는 외부 데이터에 두 개의 열에 나열하려는 내부 배열을 포함하는 중첩 된 반복기를 생성합니다. 이 개념은 세 개 이상의 열에 적용됩니다.

안쪽 열에서는 한계에 도달 할 때까지 "행"을 반복합니다. 제한은 항목 배열의 길이를 원하는 열 수 (이 경우 2로)로 나누어 결정됩니다. 나누기 방법은 컨트롤러에 있으며 현재 배열 길이를 매개 변수로 전달합니다. 그런 다음 JavaScript slice (0, array.length / columnCount) 함수가 리피터에 제한을 적용했습니다.

두 번째 열 반복기가 호출되고 두 번째 열에서 배열의 두 번째 절반을 생성하는 slice (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 이것은 내 첫 번째 게시물입니다! :-))


1

.row없이 수정합니다.

<div class="col col-33 left" ng-repeat="photo in photos">
   Content here...
</div>

및 CSS

.left {
  float: left;
}

1

여기에 쉬운 해킹 방법이 있습니다. 더 수동적이고 지저분한 마크 업으로 끝납니다. 권장하지는 않지만 유용 할 수있는 상황이 있습니다.

다음은 바이올린 링크입니다. 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"},
        ...
    ];
});

이 설정을 사용하려면 마크 업에 Math를 사용해야하므로 다음 줄을 추가하여 Math를 주입해야합니다. $scope.Math = Math;


1

이 모든 답변은 엄청나게 과도하게 설계된 것 같습니다.

지금까지 가장 간단한 방법은 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>

1
<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>

0

m59의 아주 좋은 대답을 기반으로합니다. 모델 입력이 변경되면 흐리게 표시되므로 한 번에 하나의 문자 만 변경할 수 있습니다. 이것은 필요한 모든 사람을위한 객체 목록을위한 새로운 것입니다.

편집 한 페이지에서 여러 필터를 처리하도록 업데이트 됨

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>

내가 말할 수있는 한, 이것은 대부분의 경우 작동하지만 캐싱 논리가 완전히 신뢰할 수있는 것처럼 보이지 않고 범위를 전달하는 것이 어색합니다. 입력이 필요할 때 컨트롤러 내에서 필터링하는 것이 좋습니다. 어쨌든 기술적으로 올바른 접근 방식입니다.
m59

0

저는 부트 스트랩과 angularjs를 처음 접했지만 4 개 항목 당 배열을 하나의 그룹으로 만들 수도 있으며 결과는 거의 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>

0

Lodash에는 내가 개인적으로 사용하는 chunk 메서드가 내장되어 있습니다 : 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>

0

또 다른 방법은 다음 width:33.33%; float:left과 같이 래퍼 div로 설정 됩니다.

<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>

0

나는 비슷한 경우에 각각 3 개의 열로 구성된 표시 그룹을 생성하고자하는 것을 발견했습니다. 그러나 부트 스트랩을 사용하고 있었지만 이러한 그룹을 다른 상위 div로 분리하려고했습니다. 또한 일반적으로 유용한 것을 만들고 싶었습니다.

나는 ng-repeat아래와 같이 2 로 접근했습니다 .

<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>

이렇게하면 다른 수의 열로 변경하고 여러 상위 div로 분리하기가 매우 쉽습니다.


0

누군가가 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

이것은 열에서 1,2,3을 얻는 방법에 대한 원래 질문에 대답합니다. – 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>

-1

이 코드는 lg 및 md 모드에서 세 개의 열, sm 모드에서 두 개의 열, 단일 열은 xs 모드로 요소를 정렬하는 데 도움이됩니다.

<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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.