Angular ng-repeat thêm hàng bootstrap cứ sau 3 hoặc 4 cols

Tôi đang tìm mẫu phù hợp để chèn một lớp hàng bootstrap cứ mỗi 3 cột. Tôi cần cái này vì cols không có chiều cao cố định (và tôi không muốn sửa), vì vậy nó phá vỡ thiết kế của tôi!

Đây là mã của tôi:

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

Nhưng nó chỉ hiển thị một sản phẩm trong mỗi hàng. Điều tôi muốn là kết quả cuối cùng là:

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

Tôi có thể đạt được điều này chỉ với mẫu ng-repeat (không có chỉ thị hoặc bộ điều khiển) không? Tài liệu giới thiệu ng-repeat-start và ng-repeat-end nhưng tôi không thể tìm ra cách sử dụng nó là trường hợp sử dụng này! Tôi cảm thấy như đây là thứ mà chúng tôi thường sử dụng trong tạo mẫu bootstrap! ? Cảm ơn

Câu trả lời được bình chọn nhiều nhất, mặc dù hiệu quả, nhưng không phải là những gì tôi sẽ coi là cách góc cạnh, cũng không phải là sử dụng các lớp riêng của bootstrap nhằm đối phó với tình huống này. Như @claies đã đề cập, .clearfixlớp dành cho các tình huống như thế này. Theo tôi, cách thực hiện sạch sẽ nhất như sau:

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

Cấu trúc này tránh lập chỉ mục lộn xộn của mảng sản phẩm, cho phép ký hiệu dấu chấm rõ ràng và sử dụng lớp clearfix cho mục đích dự định của nó.

Tôi biết là hơi muộn nhưng nó vẫn có thể giúp ích cho ai đó. Tôi đã làm như thế này:

<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

Được rồi, giải pháp này là xa đơn giản hơn so với những người đã ở đây, và cho phép độ rộng cột khác nhau cho độ rộng thiết bị khác nhau.

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

Lưu ý rằng % 6phần được cho là bằng số cột kết quả. Vì vậy, nếu trên phần tử cột bạn có lớp col-lg-2sẽ có 6 cột, vì vậy hãy sử dụng ... % 6.

Kỹ thuật này (ngoại trừ ng-if) thực sự được ghi lại ở đây: Tài liệu Bootstrap

Mặc dù những gì bạn muốn hoàn thành có thể hữu ích, nhưng có một lựa chọn khác mà tôi tin rằng bạn có thể bỏ qua, đó là cách đơn giản hơn nhiều.

Bạn nói đúng, các bảng Bootstrap hoạt động kỳ lạ khi bạn có các cột không có chiều cao cố định. Tuy nhiên, có một lớp bootstrap được tạo để chống lại sự cố này và thực hiện đặt lại đáp ứng .

chỉ cần tạo một khoảng trống <div class="clearfix"></div>trước khi bắt đầu mỗi hàng mới để cho phép các phao đặt lại và các cột trở về đúng vị trí của chúng.

đây là một chiến lợi phẩm .

Cảm ơn những gợi ý của bạn, bạn đã giúp tôi đi đúng đường!

Hãy đi tìm lời giải thích đầy đủ:

• Theo mặc định, truy vấn get của AngularJS http trả về một đối tượng

• Vì vậy, nếu bạn muốn sử dụng hàm @Ariel Array.prototype.chunk, trước tiên bạn phải chuyển đổi đối tượng thành một mảng.

• Và sau đó để sử dụng chức năng chunk TRONG BỘ ĐIỀU KHIỂN CỦA BẠN, nếu không nếu được sử dụng trực tiếp vào ng-repeat, nó sẽ đưa bạn đến lỗi infdig . Bộ điều khiển cuối cùng trông:

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

Và HTML trở thành:

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

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

Mặt khác, tôi quyết định trả về trực tiếp một mảng [] thay vì một đối tượng {} từ tệp JSON của mình. Bằng cách này, controller trở thành (vui lòng lưu ý cú pháp cụ thể làArray: 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 giữ nguyên như trên.

TỐI ƯU HÓA

Câu hỏi cuối cùng hồi hộp là: làm thế nào để tạo 100% AngularJS mà không cần mở rộng mảng javascript với chức năng chunk ... nếu một số người quan tâm hãy chỉ cho chúng tôi xem ng-repeat-start và ng-repeat-end có phải là cách để đi .. . Tôi tò mò ;)

GIẢI PHÁP CỦA ANDREW

Nhờ @Andrew, bây giờ chúng ta biết thêm một lớp bootstrap clearfix mỗi ba phần tử (hoặc bất kỳ số nào) để khắc phục sự cố hiển thị từ chiều cao của khối diffnts.

Vì vậy, HTML trở thành:

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

Và bộ điều khiển của bạn vẫn khá mềm với chức năng chunck bị loại bỏ :

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

Bạn có thể làm điều đó mà không cần chỉ thị nhưng tôi không chắc đó là cách tốt nhất. Để làm điều này, bạn phải tạo mảng mảng từ dữ liệu bạn muốn hiển thị trong bảng, và sau đó sử dụng 2 ng-repeat để lặp qua mảng.

để tạo mảng để hiển thị, hãy sử dụng hàm này như products.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)];
        })
    );
}

và sau đó làm điều gì đó tương tự bằng cách sử dụng 2 ng-repeat

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

Dựa trên giải pháp Alpar, chỉ sử dụng các mẫu có ng-lặp lại được phân loại. Hoạt động với cả hàng đầy đủ và một phần trống:

<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

Tôi vừa thực hiện một giải pháp về nó chỉ hoạt động trong khuôn mẫu. Giải pháp là

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

Point đang sử dụng dữ liệu hai lần, một là cho vòng lặp bên ngoài. Thẻ mở rộng sẽ vẫn còn, nhưng nó phụ thuộc vào cách bạn đánh đổi.

Nếu đó là bố cục 3 cột, nó sẽ giống như

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

Thành thật mà nói tôi muốn

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

Mặc dù nó không hoạt động.

Chỉ là một cải tiến nhỏ khác về câu trả lời @Duncan và những câu trả lời khác dựa trên phần tử clearfix. Nếu bạn muốn làm cho nội dung có thể nhấp được, bạn sẽ cần có z-index> 0 trên đó hoặc tiền tố rõ ràng sẽ chồng lên nội dung và xử lý nhấp chuột.

Đây là ví dụ không hoạt động (bạn không thể nhìn thấy con trỏ trỏ chuột và nhấp chuột sẽ không làm gì):

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

Trong khi đây là một trong những cố định :

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

Tôi đã thêm z-index: 1để nội dung tăng lên trên clearfix và thay vào đó ng-repeat-start, tôi đã xóa div container bằng cách sử dụng và ng-repeat-end(có sẵn từ AngularJS 1.2) vì nó làm cho z-index không hoạt động.

Hi vọng điêu nay co ich!

Cập nhật

Plunker: http://plnkr.co/edit/4w5wZj

tôi đã giải quyết vấn đề này bằng cách sử dụng 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>

Cách tốt nhất để áp dụng một lớp là sử dụng ng-class, nó có thể được sử dụng để áp dụng các lớp dựa trên một số điều kiện.

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

và sau đó trong bộ điều khiển của bạn

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

Sau khi kết hợp nhiều câu trả lời và gợi ý ở đây, đây là câu trả lời cuối cùng của tôi, nó hoạt động tốt flex, cho phép chúng tôi tạo các cột có chiều cao bằng nhau, nó cũng kiểm tra chỉ mục cuối cùng và bạn không cần phải lặp lại HTML bên trong. Nó không sử dụng 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>

Nó sẽ xuất ra một cái gì đó như thế này:

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

Sửa đổi một chút trong giải pháp của @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

Điều này làm việc cho tôi, không cần nối hoặc bất cứ điều gì:

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>

JavaScript

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 là giải pháp tốt nhất của nó, chỉ cần một chút tinh ý để đáp ứng nhu cầu, tôi đã có các giải pháp đáp ứng khác nhau và đã thay đổi một chút

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

Dựa trên câu trả lời của Alpar, đây là một cách tổng quát hơn để chia một danh sách các mục thành nhiều vùng chứa (hàng, cột, nhóm, bất cứ thứ gì):

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

đối với danh sách 10 mục, tạo:

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

Có thể nhanh chóng mã hóa số lượng thùng chứa thành một hàm điều khiển:

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

Cách tiếp cận này tránh sao chép đánh dấu mục ( <span>{{item.name}}</span>trong trường hợp này) trong mẫu nguồn - không phải là một chiến thắng lớn đối với một khoảng thời gian đơn giản, nhưng đối với cấu trúc DOM phức tạp hơn (mà tôi đã có), điều này giúp giữ cho mẫu KHÔ.

Cập nhật 2019 - Bootstrap 4

Vì Bootstrap 3 đã sử dụng float nên nó yêu cầu đặt lại clearfix mỗi n (3 hoặc 4) cột (.col-* ) trong .rowđể ngăn các cột không đồng đều.

Bây giờ Bootstrap 4 sử dụng flexbox , không còn cần phải bọc các cột trong các .rowthẻ riêng biệt hoặc chèn thêm div để buộc cols quấn mỗi n cột.

Bạn chỉ có thể lặp lại tất cả các cột trong một.row chứa.

Ví dụ 3 cột trong mỗi hàng trực quan là:

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

Vì vậy, đối với Bootstrap, ng-repeat chỉ đơn giản là:

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

Demo: https://www.codeply.com/go/Z3IjLRsJXX

Tôi đã làm điều đó chỉ bằng cách sử dụng boostrap, bạn phải rất cẩn thận trong vị trí của hàng và cột, đây là ví dụ của tôi.

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