Ing-repeatを使用して行の配列を印刷するにはどうすればいいですか？
a b c d e f
g h i j k l
m n o p q r
私の配列であるような配列項目印刷したい[ "A"、 "B"、 "C"、 "D"、 "e" を...]のようなRまで
私はTHS
<div ng-repeat="array in arraylist | limitTo:6">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" >
<div class="form-group">
<label>{{array}} </label>
</div>
</div>
</div>
ようにしようとしたが、それは、その後、どのように上記の形式のすべての要素を印刷するには、Fまでの印刷しますか？
Angularには、この問題の解決策が組み込まれています。 答え角度1.4.0がlimitToフィルタは、二つのパラメータ
limitToがかかるため
、かなり古そう：（上限）：（開始）
あなたはngのリピート= "アイテムを言うことができますリスト内の| limitTo：6：0 "
これはむしろ2つの異なるフィルタを使用すると効果的な解決策になるようです。
何私はあなたの例から理解できることは、あなたの配列の6番目の要素の後に改行を与えたいということです。その場合、これはあなたにできるかもしれません。
<div ng-repeat="array in arraylist ">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" >
<div class="form-group">
<label>{{array}} <br ng-if="$index%6 == 0 " /> </label>
</div>
</div>
</div>
あなたはそれだけで来てarray.Now内のアイテムの数に制限limitToフィルターを取り外し
<div ng-repeat="product in results" ng-if="$index % 6 == 0" class="row">
<div class="col-xs-2">{{results[$index]}}</div>
<div class="col-xs-2">{{results[$index + 1]}}</div>
<div class="col-xs-2">{{results[$index + 2]}}</div>
<div class="col-xs-2">{{results[$index + 3]}}</div>
<div class="col-xs-2">{{results[$index + 4]}}</div>
<div class="col-xs-2">{{results[$index + 5]}}</div>
</div>
DEMO
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.results = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
}
]);<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="listController" class="row">
<div ng-repeat="result in results" ng-if="$index % 6 == 0" class="row">
<div class="col-xs-2">{{results[$index]}}</div>
<div class="col-xs-2">{{results[$index + 1]}}</div>
<div class="col-xs-2">{{results[$index + 2]}}</div>
<div class="col-xs-2">{{results[$index + 3]}}</div>
<div class="col-xs-2">{{results[$index + 4]}}</div>
<div class="col-xs-2">{{results[$index + 5]}}</div>
</div>
</div>
</div>
</body>
</html>ここで、f、l、rは？ –
を行うことができますあなたの問題には簡単にすることができますブートストラップクラスcol-xs-12、col-sm-12、col-lg-12で空のdivを入れて解決しました。このdivは$ index％6が0.の場合にのみ表示されます。コードサンプルは以下の通りです。
<div ng-repeat="array in arraylist">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" ng-if="($index)%6==0"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="form-group">
<label>
{{array}}
</label>
</div>
</div>
</div>
要素ののみ指定された数を含む新しい配列または文字列を作成します。
ただし、array全体を反復処理する必要があります。 thisフィドルを確認してください：
<div ng-repeat="alphabet in alphabets" ng-if="$index % 6 == 0" class="row">
<div class="col-xs-2">{{alphabets[$index]}}</div>
<div class="col-xs-2">{{alphabets[$index + 1]}}</div>
<div class="col-xs-2">{{alphabets[$index + 2]}}</div>
<div class="col-xs-2">{{alphabets[$index + 3]}}</div>
<div class="col-xs-2">{{alphabets[$index + 4]}}</div>
<div class="col-xs-2">{{alphabets[$index + 5]}}</div>
</div>
はそうあなたが右の行ごとに6文字を印刷するこの
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.results = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
}
]);
この回答に2つのアップフォートがあるのはどうですか？ – Sajeetharan
を試してみてください？ – Jigar7521
ここでは制限を使う必要はありませんが、実際には新しいdivを取るためにインデックスを追跡する必要があります。ここでは答えはhttp：// stackoverflowです。com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3または4-cols – Jigar7521
リンクされた質問は*非常に似ています。 – Claies