angular.grid를 작성하기 위한 ng-timeout

angular.grid를 작성하기 위한 ng-timeout

부트스트랩 3과 angularjs를 사용하여 그리드를 만들려고 합니다.

제가 작성하려는 그리드는 ng-repeat을 사용하여 반복된 것입니다.

<div class="row">
 <div class="col-md-4">item</div>
 <div class="col-md-4">item</div>
 <div class="col-md-4">item</div>
</div>

i i사았 i i 。ng-if($index % 3 == 0)행 추가는 가능하지만, 이 방법이 제대로 작동하지 않는 것 같습니다.어떤 제안이라도 좋습니다!

감사해요!

편집: 이 코드를 사용하면 다음과 같이 동작합니다.

<div ng-repeat="item in items">
  <div ng-class="row|($index % 3 == 0)">
    <ng-include class="col-sm-4" src="'views/items/item'"></ng-include> 
  </div>
</div>

수용되는 답은 명백한 해결책이지만 프레젠테이션 로직은 컨트롤러나 모델이 아니라 시야에 남아 있어야 합니다.또한 OP의 솔루션을 사용할 수 없었습니다.

다음은 항목의 무계층 목록(배열)이 있을 때 그리드 시스템을 작성하는 두 가지 방법입니다.아이템 리스트가 알파벳이라고 합니다.

여기 플런커

$scope.alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

방법 1:

이것은 순수한 각도 용액입니다.

<div class="row" ng-repeat="letter in alphabet track by $index" ng-if="$index % 4 == 0">
  <div class="col-xs-3 letter-box" 
       ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" 
       ng-if="alphabet[i] != null">
    <div>Letter {{i + 1}} is: <b> {{alphabet[i]}}</b></div>
  </div>
</div>

외부 루프는 4회 반복될 때마다 실행되며 행이 생성됩니다.외부 루프가 실행될 때마다 내부 루프가 4회 반복되고 열이 생성됩니다.되므로 4번 실행해도 .ng-if는 내부 루프가 완료되기 전에 어레이가 종료된 경우 외부 콜이 생성되지 않도록 합니다.

방법 2:.

이 방법은 훨씬 더 간단한 솔루션이지만 각도 필터 라이브러리가 필요합니다.

<div class="row" ng-repeat="letters in alphabet | chunkBy:4">
  <div class="col-xs-3 letter-box" ng-repeat="letter in letters" >
    <div>Letter {{$index + 1}} is: <b> {{letter}}</b></div>
  </div>
</div>

외부 루프는 '행'에 해당하는 4개의 문자로 구성된 그룹을 생성합니다.

[['A', 'B', 'C', 'D'], ['E', 'F', 'G', 'H'], ... ]

내부 루프는 그룹 전체에 반복되어 열을 만듭니다.

주의: 방법 2는 외부 루프의 각 반복에 대해 필터를 평가해야 할 수 있습니다.따라서 방법 2는 대규모 데이터 세트에 대해 잘 확장되지 않을 수 있습니다.

이건 오래된 대답이야!

아직 앵글을 처음 썼는데아래에 Shivam이 대신 사용하는 훨씬 더 좋은 답변이 있습니다.프레젠테이션 로직이 컨트롤러에 들어가지 않도록 합니다.이것은 매우 좋은 일입니다.

원답

반복하고 있는 리스트를, 항상 컨트롤러내의 리스트(각각 3개의 아이템)로 분할할 수 있습니다.예를 들어 다음과 같습니다.

$scope.split_items = [['item1', 'item2', 'item3'], ['item4', 'item5', 'item6']];

그 후 다음과 같이 반복합니다.

<div ng-repeat="items in split_items" class="row">
    <div ng-repeat="item in items" class="col-md-4">
        item
    </div>
</div>

더 좋은 방법이 있을지 모르겠다.저도 ng-if와 ng-switch를 가지고 놀려고 해봤지만 잘 되지 않았습니다.

어레이를 컨트롤러 내부의 N개의 서브어레이로 분할할 수 있습니다.샘플 코드:

var array = ['A','B','C','D','E','F','G','H'];

var chunk = function(arr, size) {
   var newArr = [];
      for (var i=0; i<arr.length; i+=size) {
          newArr.push(arr.slice(i, i+size));
      }
   return newArr;
};

$scope.array = chunk(array, 2);

*. 단순하게 *.html 파일입니다.ng-repeat을 통해array

<div class="row" ng-repeat="chunk in array">
    <div class="col-md-6" ng-repeat="item in chunk">
         {{item}}
    </div>
</div>

나에게 그 운동은 :) 행운을 빈다!

아래 솔루션이 다음과 같은 그리드 규칙을 따르지 않는다고 말할 수 있습니다.rowdivs, 하지만 또 다른 해결방법은 이 문제를 폐기하는 것입니다.rowclass(또는 외부에서 사용)ng-repeat를 사용합니다.clearfix대신 클래스:

<div class="col-md-12">
  <div ng-repeat="item in items">
    <div ng-class="{'clearfix': $index%3 === 0}"></div>
    <div class="col-md-4">{{item}}</div>
  </div>
</div>

제가 봤을 때 이건 거의 와 비슷해 보여요rowclass, 단, 발생할 수 있는 결함(상기 언급 제외)에 대한 코멘트를 부탁드립니다.

ng-repeat-start 및 ng-repeat-end 사용

<div class="row">
    <div ng-repeat-start="item in items track by $index" class="col-sm-4">
      {{item}}
    </div>
    <div ng-repeat-end ng-if="($index+1) % 3 == 0" class="clearfix"></div>
</div>

.visible-* 클래스를 사용하여 다양한 미디어 쿼리에 쉽게 적응할 수 있습니다.

<div class="row">
    <div ng-repeat-start="item in items track by $index" class="col-lg-2 col-md-4 col-sm-6">
      {{item}}
    </div>
    <div ng-repeat-end>
        <div class="clearfix visible-lg-block" ng-if="($index+1) % 6 == 0"></div>
        <div class="clearfix visible-md-block" ng-if="($index+1) % 3 == 0"></div>
        <div class="clearfix visible-sm-block" ng-if="($index+1) % 2 == 0"></div>
    </div>
</div> 

메인 리피트 블록 이외의 행 관리 로직을 가지는 것이 명확하고 간결합니다.문제의 분리:-)

답변이 조금 늦었지만 나는 이것을 사용했고 경우에 따라서는 그것이 더 낫다고 믿는다.여기에는 각도 필터 패키지와 해당 ChunkBy 필터를 사용할 수 있습니다.이 패키지는 이 단일 태스크에 큰 부담이 되지만 다른 태스크에 유용한 필터가 포함되어 있습니다.사용한 코드는 다음과 같습니다.

<div class="row mar-t2" ng-repeat="items in posts | chunkBy:3">
    <div class="col-md-4" ng-repeat="post in items">
        <img ng-src="{{post.featured_url}}" class="img-responsive" />
        <a ng-click="modalPop(post.id)"><h1 class="s04-bas2">{{post.title.rendered}}</h1></a>
        <div class="s04-spotbox2" ng-bind-html="post.excerpt.rendered"></div>
    </div>
</div>

ngInit을 사용하여 조금 다른 방법을 사용하였습니다.ngInit 설명서에 기재되어 있기 때문에 이것이 적절한 솔루션인지 잘 모르겠습니다.

ngInit의 적절한 사용은 아래 데모에서 볼 수 있듯이 ngRepeat의 특수 속성에 대한 에일리어스뿐입니다.이 경우 이외에는 ngInit가 아닌 컨트롤러를 사용하여 스코프 값을 초기화해야 합니다.

이것이 이 경우에 해당하는지는 잘 모르겠습니다만, 템플릿 설계자가 부트스트랩을 사용하여 행별로 그룹화할 수 있도록 이 기능을 컨트롤러에서 떼어내려고 했습니다.아직 바인딩 테스트를 하지 않았습니다만, $index로 추적하고 있기 때문에 문제 없다고 생각합니다.

피드백을 듣고 싶습니다.

하나의 인수(각 행의 항목 수)를 사용하는 "분할"이라는 필터를 만들었습니다.

.filter('splitrow', function(){
    return function (input, count){
        var out = [];
            if(typeof input === "object"){
                for (var i=0, j=input.length; i < j; i+=count) {
                    out.push(input.slice(i, i+count));
                }
            }
        return out;
    }
});

뷰 템플릿 내에서 부트스트랩 행을 다음과 같이 정리했습니다.

<div ng-init="rows = (items|splitrow:3)">
    <div ng-repeat='row in rows' class="row">
        <div ng-repeat="item in row track by $index" class="col-md-4">
            {{item.property}}
        </div>
    </div>
</div>

이 방법을 사용하기 위해 @Shivam의 Plucker를 편집했습니다.외부 라이브러리는 필요 없습니다.

플런커

제 솔루션은 @CodeExpress 솔루션과 매우 유사합니다.제가 만든 건batch배열의 항목을 그룹화하는 필터(이 이름은 Twig의 상대 필터에서 차용됨)단순성을 위해 관련 어레이를 취급하지 않습니다.

angular.module('myapp.filters', [])
    .filter('batch', function() {
        var cacheInputs = [];
        var cacheResults = [];

        return function(input, size) {
            var index = cacheInputs.indexOf(input);

            if (index !== -1) {
                return cacheResults[index];
            }

            var result = [];

            for (i = 0; i < input.length; i += size) {
                result.push(input.slice(i, i + size));
            }

            cacheInputs.push(input);
            cacheResults.push(result);

            return result;
        }
    })
;

다음과 같이 사용할 수 있습니다.

<div ng-repeat="itemsRow in items|batch:3">
    <div class="row">
        <div ng-repeat="item in itemsRow">
            <div class="col-md-4">
                ...
            </div>
        </div>
    </div>
</div>

는 " " "를 .10 $digest() iterations reached. Aborting!

@CodeExpress의 순수 각도 솔루션의 Angular2 버전입니다.

alphabet: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                   'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

<div *ngIf='alphabet && alphabet.length'>
    <div *ngFor='#letter of alphabet; #i = index' >
        <div class="row" *ngIf='i % 4 == 0'>
            <div class="col-md-3" *ngFor='#n of [i,i+1,i+2,i+3]'>
                {{alphabet[n]}}
            </div>
        </div>
    </div>
</div>

이거면 될 것 같아

<div ng-repeat="item in items">
    <div ng-class="{row : ($index % 3 == 0)}">
        ... 
    </div>
</div>

Angular9 업데이트:

<div class="container-fluid" *ngFor="let item of alphabet; let index = index">
  <div class="row" *ngIf="index % 4 == 0">
    <div *ngFor="let i of [index, index+1, index+2, index+3]">
      <div class="col-xs-3">{{alphabet[i]}}</div>
    </div>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/20137496/angular-js-ng-repeat-for-creating-grid