Angular ng-repeat는 3 개 또는 4 개의 열마다 부트 스트랩 행을 추가합니다.

3 열마다 부트 스트랩 행 클래스를 주입하는 올바른 패턴을 찾고 있습니다. cols에는 고정 높이가 없기 때문에 필요합니다 (고정하고 싶지 않습니다). 그래서 내 디자인이 깨집니다!

내 코드는 다음과 같습니다.

<div ng-repeat="product in products">
    <div ng-if="$index % 3 == 0" class="row">
        <div class="col-sm-4" >
            ...
        </div>
    </div>
</div>

그러나 각 행에 하나의 제품 만 표시됩니다. 최종 결과로 원하는 것은 다음과 같습니다.

<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>
<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>

ng-repeat 패턴으로 만이 작업을 수행 할 수 있습니까 (지시문 또는 컨트롤러 없음)? 워드 프로세서 와 겨 반복 엔드 반복 시작 겨 소개합니다하지만 난이 사용 사례입니다 사용하는 방법을 알아낼 수 없습니다! 나는 이것이 우리가 부트 스트랩 템플릿에서 자주 사용하는 것이라고 느낍니다! ? 감사

가장 많이 득표 한 답변은 효과적이지만 제가 각도 방식이라고 생각하는 것이 아니며이 상황을 처리하기위한 부트 스트랩 자체 클래스를 사용하지도 않습니다. @claies가 언급했듯이 .clearfix클래스는 이러한 상황을위한 것입니다. 제 생각에 가장 깨끗한 구현은 다음과 같습니다.

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

이 구조는 제품 배열의 복잡한 인덱싱을 방지하고 깨끗한 점 표기법을 허용하며 의도 된 목적을 위해 clearfix 클래스를 사용합니다.

조금 늦었지만 여전히 누군가를 도울 수 있습니다. 나는 이렇게했다 :

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>

jsfiddle

이 솔루션은 이미 여기에있는 솔루션 보다 훨씬 간단하며 다양한 장치 너비에 대해 다른 열 너비를 허용합니다.

<div class="row">
    <div ng-repeat="image in images">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            ... your content here ...
        </div>
        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
    </div>
</div>

점을 유의 % 6부분이 결과 열 수를 동일하게되어있다. 따라서 열 요소에 클래스가있는 경우col-lg-2 가있는 경우 6 개의 열이 있으므로 ... % 6.

이 기술 (제외 ng-if)은 실제로 여기에 문서화되어 있습니다. Bootstrap docs

달성하고자하는 것이 유용 할 수 있지만, 훨씬 더 간단하게 간과 할 수있는 또 다른 옵션이 있습니다.

맞습니다. 높이가 고정되지 않은 열이있을 때 Bootstrap 테이블이 이상하게 작동합니다. 그러나이 문제를 해결하고 반응 형 재설정을 수행하기 위해 만들어진 부트 스트랩 클래스가 있습니다.

<div class="clearfix"></div>플로트가 재설정되고 열이 올바른 위치로 돌아갈 수 있도록 각 새 행의 시작 전에 빈 공간을 만듭니다 .

여기에 bootply가 있습니다.

제안 해주셔서 감사합니다.

완전한 설명을 위해 가자 :

• 기본적으로 AngularJS http get 쿼리는 객체를 반환합니다.

• 따라서 @Ariel Array.prototype.chunk 함수를 사용하려면 먼저 객체를 배열로 변환해야합니다.

• 그런 다음 컨트롤러 에서 청크 기능을 사용하려면 ng-repeat에 직접 사용하면 infdig 오류가 발생 합니다. 최종 컨트롤러는 다음과 같습니다.

  // Initialize products to empty list
  $scope.products = [];
  
  // Load products from config file
  $resource("/json/shoppinglist.json").get(function (data_object)
  {
      // Transform object into array
      var data_array =[];
      for( var i in data_object ) {
          if (typeof data_object[i] === 'object' && data_object[i].hasOwnProperty("name")){
              data_array.push(data_object[i]);
          }
      }
      // Chunk Array and apply scope
      $scope.products = data_array.chunk(3);
  });

그리고 HTML은 다음과 같습니다.

<div class="row" ng-repeat="productrow in products">

    <div class="col-sm-4" ng-repeat="product in productrow">

반면에 JSON 파일에서 {} 객체 대신 배열 []을 직접 반환하기로 결정했습니다. 이렇게하면 컨트롤러는 다음과 같이됩니다 (특정 구문 isArray : true ).

    // Initialize products to empty list 
    $scope.products = [];

    // Load products from config file
    $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
    {
        $scope.products = data_array.chunk(3);
    });

HTML은 위와 동일합니다.

최적화

서스펜스의 마지막 질문은 청크 함수를 사용하여 자바 스크립트 배열을 확장하지 않고 100 % AngularJS로 만드는 방법입니다. . 궁금해 ;)

ANDREW의 솔루션

@Andrew 덕분에 이제 우리는 3 개 (또는 숫자에 관계없이) 요소마다 부트 스트랩 clearfix 클래스를 추가하면 다른 블록의 높이에서 표시 문제가 수정된다는 것을 알게되었습니다.

따라서 HTML은 다음과 같습니다.

<div class="row">

    <div ng-repeat="product in products">

        <div ng-if="$index % 3 == 0" class="clearfix"></div>

        <div class="col-sm-4"> My product descrition with {{product.property}}

그리고 컨트롤러는 제거 된 덩어리 기능으로 매우 부드럽습니다 .

// Initialize products to empty list 
        $scope.products = [];

        // Load products from config file
        $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
        {
            //$scope.products = data_array.chunk(3);
            $scope.products = data_array;
        });

지시 없이도 할 수 있지만 최선의 방법인지 모르겠습니다. 이렇게하려면 테이블에 표시하려는 데이터에서 배열 배열을 만들고 그 후에 2ng-repeat를 사용하여 배열을 반복해야합니다.

디스플레이 용 배열을 만들려면 제품과 같이이 함수를 사용하십시오 .chunk (3)

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

그런 다음 2ng-repeat를 사용하여 이와 같은 작업을 수행하십시오.

<div class="row" ng-repeat="row in products.chunk(3)">
  <div class="col-sm4" ng-repeat="item in row">
    {{item}}
  </div>
</div>

Alpar 솔루션을 기반으로 애니메이션 된 ng-repeat가있는 템플릿 만 사용합니다. 전체 및 부분적으로 비어있는 행 모두에서 작동합니다.

<div data-ng-app="" data-ng-init="products='soda','beer','water','milk','wine']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4" 
            ng-repeat="product in products.slice($index, ($index+3 > products.length ? 
            products.length : $index+3))"> {{product}}</div>
    </div>
</div>

JSFiddle

방금 템플릿에서만 작동하는 솔루션을 만들었습니다. 해결책은

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/2+1">    <!-- 2 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-6" ng-if="$index>=2*$parent.$index && $index <= 2*($parent.$index+1)-1"> <!-- 2 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

포인트는 데이터를 두 번 사용하고 하나는 외부 루프 용입니다. 추가 범위 태그는 그대로 유지되지만 트레이드 오프 방식에 따라 다릅니다.

3 열 레이아웃이면 다음과 같을 것입니다.

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/3+1">    <!-- 3 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-4" ng-if="$index>=3*$parent.$index && $index <= 3*($parent.$index+1)-1"> <!-- 3 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

솔직히 원했어

$index<Math.ceil(products.length/3)

작동하지 않았지만.

@Duncan 답변 에 대한 또 다른 약간의 개선 사항 과 clearfix 요소를 기반으로 한 다른 답변입니다. 콘텐츠를 클릭 할 수있게하려면 z-index> 0 이 필요 하거나 clearfix가 콘텐츠를 겹치고 클릭을 처리합니다.

다음은 작동하지 않는 예입니다 (커서 포인터를 볼 수없고 클릭해도 아무 작업도 수행되지 않음).

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4" style="cursor: pointer" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

이것이 고정 된 반면 :

<div class="row">
    <div ng-repeat-start="product in products" class="clearfix" ng-if="$index % 3 == 0"></div>
    <div ng-repeat-end class="col-sm-4" style="cursor: pointer; z-index: 1" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
    </div>
</div>

z-index: 1콘텐츠가 clearfix 위로 올라가도록 추가 했으며 z-index가 작동하지 않기 때문에 대신 ng-repeat-startand ng-repeat-end(AngularJS 1.2에서 사용 가능)를 사용하여 컨테이너 div를 제거 했습니다.

도움이 되었기를 바랍니다!

최신 정보

플 런커 : http://plnkr.co/edit/4w5wZj

나는 ng-class를 사용하여 이것을 해결했습니다.

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

클래스를 적용하는 가장 좋은 방법은 ng-class를 사용하는 것이며, 어떤 조건에 따라 클래스를 적용하는 데 사용할 수 있습니다.

<div ng-repeat="product in products">
   <div ng-class="getRowClass($index)">
       <div class="col-sm-4" >
           <!-- your code -->
       </div>
   </div>

그런 다음 컨트롤러에서

$scope.getRowClass = function(index){
    if(index%3 == 0){
     return "row";
    }
}

여기에 많은 답변과 제안을 결합한 후 이것이 저의 최종 답변입니다.는 잘 작동 flex하여 동일한 높이의 열을 만들고 마지막 색인도 확인하며 내부 HTML을 반복 할 필요가 없습니다. 사용하지 않습니다 clearfix.

<div ng-repeat="prod in productsFiltered=(products | filter:myInputFilter)" ng-if="$index % 3 == 0" class="row row-eq-height">
    <div ng-repeat="i in [0, 1, 2]" ng-init="product = productsFiltered[$parent.$parent.$index + i]"  ng-if="$parent.$index + i < productsFiltered.length" class="col-xs-4">
        <div class="col-xs-12">{{ product.name }}</div>
    </div>
</div>

다음과 같이 출력됩니다.

<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>

@alpar의 솔루션에서 약간의 수정

<div data-ng-app="" data-ng-init="products=['A','B','C','D','E','F', 'G','H','I','J','K','L']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 6 == 0" class="row">
        <div class="col-xs-2" ng-repeat="idx in [0,1,2,3,4,5]">
        {{products[idx+$parent.$index]}} <!-- When this HTML is Big it's useful approach -->
        </div>
    </div>
</div>

jsfiddle

이것은 나를 위해 일했으며 접합이나 아무것도 필요하지 않았습니다.

HTML

<div class="row" ng-repeat="row in rows() track by $index">
    <div class="col-md-3" ng-repeat="item in items" ng-if="indexInRange($index,$parent.$index)"></div>
</div>

자바 스크립트

var columnsPerRow = 4;
$scope.rows = function() {
  return new Array(columnsPerRow);
};
$scope.indexInRange = function(columnIndex,rowIndex) {
  return columnIndex >= (rowIndex * columnsPerRow) && columnIndex < (rowIndex * columnsPerRow) + columnsPerRow;
};

Born Solutions 최고의 솔루션, 요구 사항을 충족하는 데 약간의 시간이 필요합니다. 다른 반응 형 솔루션을 사용하고 약간 변경했습니다.

<div ng-repeat="post in posts">
    <div class="vechicle-single col-lg-4 col-md-6 col-sm-12 col-xs-12">
    </div>
    <div class="clearfix visible-lg" ng-if="($index + 1) % 3 == 0"></div>
    <div class="clearfix visible-md" ng-if="($index + 1) % 2 == 0"></div>
    <div class="clearfix visible-sm" ng-if="($index + 1) % 1 == 0"></div>
    <div class="clearfix visible-xs" ng-if="($index + 1) % 1 == 0"></div>
</div>

Alpar의 답변을 바탕으로 단일 항목 목록을 여러 컨테이너 (행, 열, 버킷 등)로 분할하는보다 일반적인 방법은 다음과 같습니다.

<div class="row" ng-repeat="row in [0,1,2]">
  <div class="col" ng-repeat="item in $ctrl.items" ng-if="$index % 3 == row">
    <span>{{item.name}}</span>
  </div>
</div> 

10 개 항목 목록에 대해 다음을 생성합니다.

<div class="row">
  <div class="col"><span>Item 1</span></div>
  <div class="col"><span>Item 4</span></div>
  <div class="col"><span>Item 7</span></div>
  <div class="col"><span>Item 10</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 2</span></div>
  <div class="col"><span>Item 5</span></div>
  <div class="col"><span>Item 8</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 3</span></div>
  <div class="col"><span>Item 6</span></div>
  <div class="col"><span>Item 9</span></div>
</div> 

컨테이너 수는 컨트롤러 함수로 빠르게 코딩 할 수 있습니다.

JS (ES6)

$scope.rowList = function(rows) {
  return Array(rows).fill().map((x,i)=>i);
}
$scope.rows = 2;

HTML

<div class="row" ng-repeat="row in rowList(rows)">
  <div ng-repeat="item in $ctrl.items" ng-if="$index % rows == row">
    ...

이 접근 방식은 <span>{{item.name}}</span>소스 템플릿에서 항목 마크 업 ( 이 경우)을 복제하는 것을 방지 합니다. 단순한 범위에 대한 큰 승리는 아니지만 더 복잡한 DOM 구조 (내가 보유한)의 경우 템플릿을 DRY로 유지하는 데 도움이됩니다.

2019 업데이트-부트 스트랩 4

부트 스트랩 3 중고 플로트 때문에 필요한 clearfix 재설정을 마다 N (3, 4) 열 ( .col-*하여).row 고르지 않게 래핑되는 것을 방지하기 위해의 .

이제 Bootstrap 4에서 flexbox를 사용 하므로 더 이상 별도의 .row태그로 열을 래핑 하거나 추가 div를 삽입하여 열이 n 마다 래핑되도록 할 필요가 없습니다. 열 .

단일 컨테이너 에서 모든 열을 간단히 반복 할 수 있습니다 .row.

예를 들어 각 시각적 행의 3 개 열은 다음과 같습니다.

<div class="row">
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     (...repeat for number of items)
</div>

따라서 Bootstrap의 경우 ng-repeat는 간단합니다.

  <div class="row">
      <div class="col-4" ng-repeat="item in items">
          ... {{ item }}
      </div>
  </div>

데모 : https://www.codeply.com/go/Z3IjLRsJXX

저는 부 스트랩 만 사용했습니다. 행과 열의 위치에 매우주의해야합니다. 여기 제 예가 있습니다.

<section>
<div class="container">
        <div ng-app="myApp">
        
                <div ng-controller="SubregionController">
                    <div class="row text-center">
                        <div class="col-md-4" ng-repeat="post in posts">
                            <div >
                                <div>{{post.title}}</div>
                            </div>
                        </div>
                    
                    </div>
                </div>        
        </div>
    </div>
</div> 

</section>