bagaimana membagi data ng-repeat dengan tiga kolom menggunakan bootstrap

Saya menggunakan ng-repeat dengan kode saya, saya memiliki nomor 'n' dari kotak teks berdasarkan ng-repeat. Saya ingin menyelaraskan kotak teks dengan tiga kolom.

ini kode saya

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

Pendekatan yang paling andal dan benar secara teknis adalah dengan mengubah data dalam pengontrol. Berikut adalah fungsi dan penggunaan potongan sederhana.

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

Maka tampilan Anda akan terlihat seperti ini:

<div class="row" ng-repeat="rows in chunkedData">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>

Jika Anda memiliki masukan apa pun di dalam ng-repeat, Anda mungkin ingin melepas / bergabung kembali dengan array saat data diubah atau saat dikirimkan. Berikut tampilannya dalam a $watch, sehingga data selalu tersedia dalam format asli yang digabungkan:

$scope.$watch('chunkedData', function(val) {
  $scope.data = [].concat.apply([], val);
}, true); // deep watch

Banyak orang lebih suka melakukannya dalam tampilan dengan filter. Ini dimungkinkan, tetapi sebaiknya hanya digunakan untuk tujuan tampilan! Jika Anda menambahkan masukan dalam tampilan yang difilter ini, ini akan menyebabkan masalah yang dapat diselesaikan, tetapi tidak cantik atau tidak dapat diandalkan .

Masalah dengan filter ini adalah ia mengembalikan larik bersarang baru setiap kali. Angular mengamati nilai balik dari filter. Pertama kali filter dijalankan, Angular mengetahui nilainya, lalu menjalankannya lagi untuk memastikan sudah selesai diubah. Jika kedua nilai sama, siklus diakhiri. Jika tidak, filter akan aktif berulang kali hingga sama, atau Angular menyadari digest loop tak terbatas sedang terjadi dan dimatikan. Karena array / objek bertingkat baru sebelumnya tidak dilacak oleh Angular, ia selalu melihat nilai yang dikembalikan berbeda dari sebelumnya. Untuk memperbaiki filter "tidak stabil" ini, Anda harus menggabungkan filter dalam sebuah memoizefungsi. lodashmemiliki memoizefungsi dan versi lodash terbaru juga menyertakan chunkfungsi, jadi kita dapat membuat filter ini dengan sangat mudahnpmmodul dan menyusun skrip dengan browserifyatau webpack.

Ingat: hanya tampilan! Saring di pengontrol jika Anda menggunakan input!

Pasang lodash:

npm install lodash-node

Buat filter:

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

Dan inilah contoh dengan filter ini:

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

Pesan item secara vertikal

1  4
2  5
3  6

Mengenai kolom vertikal (daftar dari atas ke bawah) daripada horizontal (kiri ke kanan), implementasi yang tepat bergantung pada semantik yang diinginkan. Daftar yang terbagi secara tidak merata dapat didistribusikan dengan berbagai cara. Inilah salah satu caranya:

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

Namun, cara paling langsung dan sederhana untuk mendapatkan kolom adalah dengan menggunakan kolom CSS :

.columns {
  columns: 3;
}

<div class="columns">
  <div ng-repeat="item in ['a','b','c','d','e','f','g']">
    {{item}}
  </div>
</div>

Solusi ini sangat sederhana:

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>

DEMO di FIDDLE

Solusi bersih dan mudah beradaptasi yang tidak memerlukan manipulasi data :

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

JavaScript:

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

Ini adalah solusi sederhana untuk merender data menjadi baris dan kolom secara dinamis tanpa perlu memanipulasi larik data yang Anda coba tampilkan. Ditambah jika Anda mencoba mengubah ukuran jendela browser Anda dapat melihat grid secara dinamis menyesuaikan dengan ukuran layar / div.

(Saya juga menambahkan akhiran {{$ index}} ke id Anda karena ng-repeat akan mencoba membuat beberapa elemen dengan id yang sama jika Anda tidak melakukannya.)

Contoh kerja serupa

Jawaban m59 cukup bagus. Satu hal yang saya tidak suka tentang itu adalah ia menggunakan divs untuk apa yang berpotensi menjadi data untuk tabel.

Jadi sehubungan dengan filter m59 (jawaban di suatu tempat di atas), berikut adalah cara menampilkannya dalam tabel.

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

Berikut cara yang lebih sederhana:

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

Jawaban Cumulo Nimbus berguna bagi saya tetapi saya ingin grid ini dibungkus oleh div yang dapat menampilkan scrollbar ketika daftar terlalu panjang.

Untuk mencapai ini saya menambahkan style="height:200px; overflow:auto"ke div di sekitar tabel yang menyebabkannya ditampilkan sebagai satu kolom.

Sekarang bekerja untuk panjang array satu.

Saya memiliki fungsi dan menyimpannya dalam sebuah layanan sehingga saya dapat menggunakannya di seluruh aplikasi saya:

Layanan:

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

});

Pengontrol:

$scope.rows   = SplitArrayService.SplitArray($scope.images, 3); //im splitting an array of images into 3 columns

Markup:

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

Pendekatan saya adalah campuran dari beberapa hal.

Tujuan saya adalah memiliki kisi yang menyesuaikan dengan ukuran layar. Saya ingin 3 kolom untuk lg, 2 kolom untuk smdan md, dan 1 kolom untuk xs.

Pertama, saya membuat fungsi cakupan berikut, menggunakan $windowlayanan sudut :

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

Kemudian, saya menggunakan kelas yang diusulkan oleh @Cumulo Nimbus:

.new-row {
    clear: left;
}

Di div yang berisi ng-repeat, saya menambahkan resizabledirektif, seperti yang dijelaskan di halaman ini , sehingga setiap kali jendela diubah ukurannya, $windowlayanan sudut diperbarui dengan nilai baru.

Akhirnya, dalam div berulang saya memiliki:

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

Tolong beri tahu saya jika ada kekurangan dalam pendekatan ini.

Semoga bisa bermanfaat.

Trik sederhana dengan CSS "clearfix" yang direkomendasikan oleh Bootstrap:

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

Banyak keuntungan: Efisien, cepat, menggunakan rekomendasi Boostrap, menghindari kemungkinan masalah $ digest, dan tidak mengubah model Angular.

Contoh ini menghasilkan repeater bersarang di mana data luar menyertakan array dalam yang ingin saya cantumkan dalam dua kolom. Konsep tersebut akan berlaku untuk tiga kolom atau lebih.

Di kolom dalam saya ulangi "baris" sampai batas tercapai. Batas ditentukan dengan membagi panjang larik item dengan jumlah kolom yang diinginkan, dalam hal ini dengan dua. Metode pembagian berada pada pengontrol dan melewatkan panjang array saat ini sebagai parameter. Fungsi JavaScript slice (0, array.length / columnCount) kemudian menerapkan batas ke pengulang.

Repeater kolom kedua kemudian dipanggil dan mengulangi slice (array.length / columnCount, array.length) yang menghasilkan paruh kedua array di kolom dua.

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

Semoga ini bisa membantu untuk melihat solusi dengan cara lain. (PS ini adalah posting pertama saya di sini! :-))

Saya perbaiki tanpa .row

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

dan css

.left {
  float: left;
}

Berikut cara yang mudah diretas untuk melakukannya. Ini lebih manual dan berakhir dengan markup yang berantakan. Saya tidak merekomendasikan ini, tetapi ada situasi di mana ini mungkin berguna.

Ini tautan biola 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"},
        ...
    ];
});

Pengaturan ini mengharuskan kita untuk menggunakan beberapa Matematika pada markup: /, jadi Anda harus memasukkan Matematika dengan menambahkan baris ini: $scope.Math = Math;

Semua jawaban ini tampaknya terlalu direkayasa.

Sejauh ini, metode paling sederhana adalah mengatur div input dalam bootstrap kolom col-md-4, kemudian bootstrap akan secara otomatis memformatnya menjadi 3 kolom karena sifat bootstrap 12 kolom:

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

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

Mendasarkan pada jawaban m59 yang sangat bagus. Saya menemukan bahwa input model akan kabur jika diubah, jadi Anda hanya dapat mengubah satu karakter dalam satu waktu. Ini adalah yang baru untuk daftar objek bagi siapa saja yang membutuhkannya:

EDIT Diperbarui untuk menangani beberapa filter pada satu halaman

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

Dan ini akan menjadi penggunaannya:

<div ng-repeat="row in items | partition:3:this">
  <span class="span4">
    {{ $index }}
  </span>
</div>

Saya baru dalam bootstrap dan angularjs, tapi ini juga bisa menjadikan Array per 4 item sebagai satu grup, hasilnya hampir seperti 3 kolom. Trik ini menggunakan prinsip garis putus bootstrap.

<div class="row">
 <div class="col-sm-4" data-ng-repeat="item in items">
  <div class="some-special-class">
   {{item.XX}}
  </div>
 </div>
</div>

Lodash memiliki metode potongan bawaan sekarang yang secara pribadi saya gunakan: https://lodash.com/docs#chunk

Berdasarkan ini, kode pengontrol mungkin terlihat seperti berikut:

$scope.groupedUsers = _.chunk( $scope.users, 3 )

Lihat kode:

<div class="row" ng-repeat="rows in groupedUsers">
  <div class="span4" ng-repeat="item in rows">{{item}}</div>
</div>

Cara lain diatur width:33.33%; float:leftke div pembungkus seperti ini:

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

Saya menemukan diri saya dalam kasus serupa, ingin menghasilkan grup tampilan masing-masing 3 kolom. Namun, meskipun saya menggunakan bootstrap, saya mencoba memisahkan grup ini menjadi div induk yang berbeda. Saya juga ingin membuat sesuatu yang berguna secara umum.

Saya mendekatinya dengan 2 ng-repeatseperti di bawah ini:

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

Ini membuatnya sangat mudah untuk mengubah ke sejumlah kolom yang berbeda, dan dipisahkan menjadi beberapa div induk.

Untuk berjaga-jaga jika seseorang menginginkan Angular 7 (dan versi yang lebih tinggi), berikut adalah contoh yang saya gunakan di salah satu aplikasi saya:

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 FILE

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

Ini adalah solusi luar biasa untuk membuat kolom / baris baru secara dinamis tergantung pada berapa banyak item yang Anda iterasi dari database. Terima kasih!

ini menjawab pertanyaan awal yaitu bagaimana mendapatkan 1,2,3 di kolom. - Ditanyakan oleh kuppu 8 Feb '14 pukul 13:47

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

Lihat Kode (catatan: menggunakan bootstrap 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>

Kode ini akan membantu menyelaraskan elemen dengan tiga kolom dalam mode lg, dan md, dua kolom dalam mode sm, dan satu kolom adalah mode 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>