Angular ng-repeat เพิ่มแถว bootstrap ทุกๆ 3 หรือ 4 cols

ฉันกำลังมองหารูปแบบที่ถูกต้องในการฉีดคลาสแถว bootstrap ทุกๆ 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 เท่านั้น (โดยไม่มีคำสั่งหรือตัวควบคุม) ได้หรือไม่? เอกสารแนะนำ ng ซ้ำเริ่มต้นและ ng ซ้ำสิ้น แต่ฉันไม่สามารถคิดออกว่าจะใช้มันเป็นกรณีการใช้งานนี้! ฉันรู้สึกว่านี่เป็นสิ่งที่เรามักใช้ในเทมเพลต bootstrap! เหรอ? ขอบคุณ

คำตอบที่ได้รับการโหวตสูงสุดในขณะที่มีประสิทธิภาพไม่ใช่สิ่งที่ฉันคิดว่าเป็นวิธีเชิงมุมและไม่ได้ใช้คลาสของ bootstrap เองที่มีไว้เพื่อจัดการกับสถานการณ์นี้ ดังที่ @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

แม้ว่าสิ่งที่คุณต้องการทำให้สำเร็จอาจเป็นประโยชน์ แต่ก็มีอีกทางเลือกหนึ่งที่ฉันเชื่อว่าคุณอาจมองข้ามสิ่งนั้นไปได้ง่ายกว่ามาก

คุณถูกต้องตาราง Bootstrap ทำงานแปลก ๆ เมื่อคุณมีคอลัมน์ที่ไม่ได้มีความสูงคงที่ แต่มีระดับบูตที่สร้างขึ้นเพื่อต่อสู้กับปัญหานี้และดำเนินการตั้งค่าการตอบสนอง

เพียงแค่สร้างที่ว่างเปล่า <div class="clearfix"></div>ก่อนเริ่มแถวใหม่แต่ละแถวเพื่อให้การลอยตัวรีเซ็ตและคอลัมน์กลับสู่ตำแหน่งที่ถูกต้อง

ที่นี่เป็นbootply

ขอบคุณสำหรับคำแนะนำของคุณคุณมาถูกทางแล้ว!

ไปดูคำอธิบายที่สมบูรณ์กันเถอะ:

• โดยค่าเริ่มต้นการสอบถาม AngularJS http get จะส่งคืนวัตถุ

• ดังนั้นหากคุณต้องการใช้ฟังก์ชัน @Ariel Array.prototype.chunk คุณต้องเปลี่ยนวัตถุเป็นอาร์เรย์ก่อน

• และจากนั้นจะใช้ฟังก์ชั่นก้อนในการควบคุมของคุณมิฉะนั้นถ้าใช้โดยตรงใน ng ซ้ำก็จะนำคุณไปยังข้อผิดพลาด 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 ยังคงเหมือนเดิม

การเพิ่มประสิทธิภาพ

คำถามสุดท้ายในใจคือ: ทำอย่างไรให้ AngularJS 100% โดยไม่ต้องขยายอาร์เรย์จาวาสคริปต์ด้วยฟังก์ชั่นก้อน ... ถ้าบางคนสนใจที่จะแสดงให้เราเห็นว่า ng-repeat-start และ ng-repeat-end เป็นวิธีที่จะไป .. . ฉันอยากรู้ ;)

โซลูชันของ ANDREW

ขอบคุณ @Andrew ตอนนี้เรารู้แล้วว่าการเพิ่มคลาส bootstrap clearfix ทุกๆสามองค์ประกอบ (หรือตัวเลขใดก็ได้) ช่วยแก้ไขปัญหาการแสดงผลจากความสูงของบล็อก differents

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

และคอนโทรลเลอร์ของคุณยังคงค่อนข้างนุ่มนวลด้วยฟังก์ชันchunck ที่ถูกลบออก :

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

คุณสามารถทำได้โดยไม่ต้องมีคำสั่ง แต่ฉันไม่แน่ใจว่าเป็นวิธีที่ดีที่สุด ในการทำสิ่งนี้คุณต้องสร้างอาร์เรย์ของอาร์เรย์จากข้อมูลที่คุณต้องการแสดงในตารางและหลังจากนั้นใช้ 2 ng-repeat เพื่อวนซ้ำผ่านอาร์เรย์

ในการสร้างอาร์เรย์สำหรับการแสดงผลให้ใช้ฟังก์ชันนี้เหมือนกับ 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)];
        })
    );
}

แล้วทำอะไรแบบนั้นโดยใช้ 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>

ขึ้นอยู่กับโซลูชัน 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>

Point กำลังใช้ข้อมูลสองครั้งโดยจุดหนึ่งใช้สำหรับวงนอก แท็กช่วงพิเศษจะยังคงอยู่ แต่ขึ้นอยู่กับว่าคุณจะแลกอย่างไร

ถ้าเป็นเลย์เอาต์ 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 และฉันได้ลบคอนเทนเนอร์ div โดยใช้แทนng-repeat-startและng-repeat-end(มีให้จาก AngularJS 1.2) เพราะทำให้ z-index ไม่ทำงาน

หวังว่านี่จะช่วยได้!

อัปเดต

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

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 เป็นโซลูชันที่ดีที่สุดเพียงแค่ต้องการสองสัปดาห์เพื่อรองรับความต้องการฉันมีโซลูชันที่ตอบสนองที่แตกต่างกันและเปลี่ยนแปลงเล็กน้อย

<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 ที่ซับซ้อนมากขึ้น (ซึ่งฉันมี) สิ่งนี้จะช่วยให้เทมเพลตแห้ง

อัปเดต 2019 - Bootstrap 4

เนื่องจาก Bootstrap 3 ใช้โฟลตจึงต้องใช้clearfix รีเซ็ตทุกๆn (3 หรือ 4) คอลัมน์ ( .col-*) ในคอลัมน์.rowเพื่อป้องกันการพันคอลัมน์ที่ไม่เท่ากัน

ตอนนี้ Bootstrap 4 ใช้flexboxแล้วไม่จำเป็นต้องรวมคอลัมน์ใน.rowแท็กแยกอีกต่อไปหรือใส่ div พิเศษเพื่อบังคับให้ cols รวมทุก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 การทำซ้ำจึงเป็นเพียง:

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

การสาธิต: https://www.codeply.com/go/Z3IjLRsJXX

ฉันทำโดยใช้ boostrap เท่านั้นคุณต้องระมัดระวังในตำแหน่งของแถวและคอลัมน์นี่คือตัวอย่างของฉัน

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