bagaimana membagi data ng-repeat dengan tiga kolom menggunakan bootstrap


122

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>

1
Jadi dengan asumsi Anda memiliki sembilan (9) Anda ingin 1,2,3 berturut-turut atau dalam satu kolom?
Gabriele Petrioli

Jawaban:


254

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>

Terima kasih atas bantuan Anda. Tapi Menggunakan carousel dengan ui-chart di angular tidak bisa menggambar grafik bt carousel berfungsi dengan baik. kode saya adalah <carousel interval = "myInterval"> <slide ng-repeat = "milestone di mileStone | split: 4" active = "slide.active"> <div class = "col-md-3" ng-repeat = " milestone1 dalam milestone "> <div style =" text-align: center; "> <div ui-chart =" data "chart-options =" ​​chartOptions "> </div> </div> </div> </ slide > </carousel> Dan saya menginisialisasi variabel lingkup saya sebagai milestone data JSON.
kuppu

1
@ m59 Sekarang fungsi ini menampilkan data di baris pertama baris a b ckedua d e f. Bisakah saya menampilkan a b di kolom pertama c ddi kolom kedua dan e fdi kolom ketiga? Terima kasih

1
@ Ifch0o1 Anda akan benar jika demikian [].concat.call([], val). Anda harus mempertimbangkan apa apply. valadalah larik larik, dan kami ingin meneruskan setiap larik di dalamnya sebagai argumen concat. Saya pikir Anda berfokus pada konteks [], yang bukan merupakan intinya di sini. Yang kami inginkan adalah [].concat(val[1], val[2], val[3], etc), jadi kami membutuhkanapply([], val)
m59

1
@bahadir saya update jawabannya agar lebih jelas. Lihat apa yang terjadi jika Anda membuat filter yang hanya mengembalikan []vs [[]]dan [{}]. Array / objek bersarang membuat Angular melihat hasil yang berbeda pada setiap filter, dan terus berulang mencari hasil agar tetap sama (stabilkan).
m59

1
Anda benar-benar mengirim spam ke komentar :) Cobalah sendiri. var x = [1,2,3]; var y = [1,2,3]; console.log(x === y);Pemeriksaan mendalam berarti merangkai dan membandingkan string, yang berisiko karena suatu objek mungkin tidak dapat dirangkai, atau secara rekursif memeriksa setiap properti secara individual. Saya pikir Angular dapat menerapkannya untuk filter, tetapi saya yakin ada alasan bagus mengapa mereka tidak melakukannya. Mungkin karena tujuan utamanya adalah filter untuk modifikasi sederhana kumpulan data, bukan perombakan total dengan perubahan struktur.
m59

64

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

masukkan deskripsi gambar di sini


3
Jawaban Terbaik! Dan lakukan apa yang dibutuhkan dengan arahan asli! Selamat!
Renan Franca

1
Solusi ini berfungsi, tetapi sejauh praktik terbaik berjalan, Anda mungkin tidak boleh menggunakan tabel untuk menentukan tata letak di markup Anda :)
Dave Cooper

2
Seperti yang disebutkan @DaveCooper, berikut adalah layout alternatif tanpa tabel: plnkr.co/edit/81oj8mHaNyfQpCmRBWO4?p=preview . Pertimbangkan tabel untuk data yang ditabulasi, tetapi sebaliknya, ini adalah tata letak yang lebih baik untuk perangkat seluler dan ukuran layar variabel.
Zymotik

1
Sejauh ini, ini adalah solusi terbaik. Butuh waktu untuk menemukan semua keanehan saat menggunakan kerangka kerja baru tetapi ng-switch adalah anugerah
Zoran

Jika Anda memilih div dan bukan tabel, Anda bisa menempatkan ng-switch-when="0"div luar satu kali alih-alih 3 item.
Hans Wouters

19

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


1
Saya yakin OP menginginkan markup untuk baris / kolom Twitter Bootstrap, tetapi ini mungkin berguna bagi seseorang. Namun, Anda perlu memasukkan kode dan penjelasan dalam jawaban Anda. Tautan saja jawaban akan dihapus.
m59

@ m59 Jawaban yang diperbarui. Terima kasih atas sarannya
Cumulo Nimbus

1
+1 besar untuk tidak memerlukan manipulasi data . Ini bekerja sempurna untuk kebutuhan saya yang ingin memisahkan data dalam satu rentang menggunakan ng-repeat menjadi 2 kolom sehingga modal Bootstrap saya tidak terlalu lama! Saya terkejut betapa sederhananya penerapannya! <span ng-repeat="z in waiverModalLinks" ng-class="{'new-row':startNewRow($index, columnBreak)}" class="{{z.id}}"><a href="{{z.link}}{{z.title}}">{{z.title}}</a></span>Itu ada di dalam 'modal-body'.
Christine268

15

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>

7

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.


jika hanya ada 1 item dalam larik, baris pertama tidak akan ditampilkan. untuk memperbaiki perubahan ini ng-hide="$index%2!==0"
Anuj Pandey

4

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>

Meskipun ini keren, itu tidak membantu saat menggunakan filter lain seperti orderBy atau filter.
Robbie Smith

2

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.


2

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.


1

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! :-))


1

Saya perbaiki tanpa .row

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

dan css

.left {
  float: left;
}

1

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;


1

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>

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

0

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>

Sejauh yang saya tahu, ini seharusnya berfungsi sebagian besar waktu tetapi logika caching tidak terlihat sepenuhnya dapat diandalkan dan meneruskan cakupan itu canggung. Saya sangat merekomendasikan hanya memfilter di dalam pengontrol saat input diperlukan. Ini adalah pendekatan yang benar secara teknis.
m59

0

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>

0

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>

0

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>

0

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.


0

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!


-1

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>

-1

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.