Ng-tekrarlıyorum, benim kod 'n' metin kutusu ng-repeat. dayalı numarası ile kullanıyorum Üç sütun ile metin hizalamak istiyorum.

bu benim kodudur

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

En güvenilir ve teknik olarak doğru bir yaklaşım denetleyicisi verileri dönüştürmek için. Burada basit bir yığın işlevi ve kullanımı.

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

Sonra Görünüm şu şekilde görünecektir:

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

Eğer ng-repeat içinde herhangi bir girişi varsa muhtemelen veri değiştirilmiş veya teslim olarak/diziler unchunk katılmak isteyeceksiniz. Bu veriler her zaman orijinal olarak kullanılabilir $watch birleştirilmiş bir biçimde görünür:

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

Birçok kişi bir filtre ile görünümünde bunu yapmak için tercih ediyor. Bu mümkün, ama sadece görüntüleme amacıyla kullanılmamalıdır! Eğer bu süzülmüş bir görünüm içinde giriş eklerseniz, bu sorunlara neden olurolabilirçözülecek amaçok güvenilir değil.

Bu filtre ile sorun yeni iç içe diziler her zaman döndürür. Açısal filtre dönüş değeri izliyor. Filtre çalışır ilk kez, Açısal değerini bilir, tekrar değiştirmeden yapılır sağlamak için çalışır. Eğer iki değer aynı ise, döngüyü sona erdi. Filtre aynı kadar tekrar ve tekrar ateş, ya da fark Açısal ve sindirimi sonsuz değildir, ve döngü kapanır gerçekleşiyor. Yeni iç içe diziler/nesneleri önceden Açısal tarafından takip ediliyordu çünkü, her zaman dönüş değeri önceki farklı olarak görür. Bu "memoize bir fonksiyon. filtre almanız gerekir" filtreler, kararsız düzeltmek için lodash memoize işlev ve en son sürümü lodash de içerir chunk fonksiyon yaratmak için bu filtre çok sade bir şekilde kullanma npm modüller ve derleme komut ile browserify webpack.

Unutmayın: sadece görüntü! Eğer giriş kullanıyorsanız filtre denetleyicisi!

Lodash yükleyin:

npm install lodash-node

Filtre oluşturma:

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

Ve burada bu filtre ile bir örnek:

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

Sipariş öğeleri dikey olarak

1  4
2  5
3  6

Dikey sütun (yukarıdan aşağıya liste) yerine yatay (soldan sağa) ile ilgili, tam uygulanması istenen semantik bağlıdır. Düzensiz bölmek listeler farklı şekilde dağıtılabilir. İşte bir şekilde

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

Ancak, en doğrudan ve açıkça sadece basit sütunlar yolu CSS columns kullanmak için:

.columns {
  columns: 3;
}

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