私はこれに対する答えを見つけることができないか、適切な場所を探していませんが、いくつかのグループをグループ化する方法を見つけようとしています。 AngularJSとBootstrapの両方を使用して1つの大きなパネル内のエレメント（パネル）AngularJSとBootstrapを使用してパネル内のパネルをグループ化する
たとえば、顧客の連絡先フォームを表す約60個ほどのミニパネルがあります。これらのフォームはすべて、1つの大きなパネルの中に、ng-repeatで座っています。私は、どういうわけか、異なる基準（例えば州コード別、または会社の種類など）によって、自分の連絡先をドロップダウンコントロールからグループ化したいと考えています。
私はすべての連絡先が.page-header（以下の例のように設定）により、1枚のパネルに示されているが、分離することがしたいと思います：
は誰もが、このどこかのいずれかの例を見ている、またはこれがどのように達成されるかについての詳細はありますか？
あなたはArray#reduce、ng-repeat-startとng-repeat-end使用して、グループでのアレイを利用することができます：
HTMLを（私は説明の目的のために、ここでのブートストラップのパネルを使用）：
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div class="panel panel-default">
<div class="panel-heading" ng-repeat-start="(group, values) in groupedData">
{{ group }}
</div>
<div class="panel-body" ng-repeat-end ng-repeat="value in values">
{{ value.name }}
</div>
</div>
</div>
</body>
はJavaScript：
angular.module('MyApp', []).controller('MyCtrl', ['$scope', function($scope){
var rawData = [{
"name": "A1",
"group": "A" // For simplicity, my grouping criteria is called 'group'
},{
"name": "A2",
"group": "A"
},{
"name": "A3",
"group": "A"
},{
"name": "B1",
"group": "B"
},{
"name": "C1",
"group": "C"
},{
"name": "C2",
"group": "C"
}];
// Perform a Group-by on the rawData: {"A": [{...}], ...} using Array#reduce
$scope.groupedData = rawData.reduce(function(accumulator, value){
if(!accumulator[value.group]) accumulator[value.group] = [];
accumulator[value.group].push(value);
return accumulator;
}, {});
}]);
JSBin例：http://jsbin.com/gigerilope/edit?html,js,output
編集：いくつかのボタンをクリックすると、このグループ化をトリガするには
、我々は最初のボタンを追加し、ng-clickハンドラバインド：あなたの拡張の質問に答えるコントローラで
<button class="btn btn-default" ng-click="performGrouping()">
Perform Grouping
</button>
を、代わりに割り当てますグループ化されたデータをすぐに、私たちはng-clickで呼び出されることになる処理関数でラップ：
$scope.groupedData = null;
$scope.performGrouping = function() {
$scope.groupedData = rawData.reduce(function(accumulator, value) {
if (!accumulator[value.group]) accumulator[value.group] = [];
accumulator[value.group].push(value);
return accumulator;
}, {});
};
N OW我々はボタンをクリックする前に、「グループ化なし」を表示したいので、私たちは物語伝えるために<div>パネルを追加します。この時点で
<div class="panel panel-default">
<div class="panel-body">
No Grouping Yet
</div>
</div>
を、両方のパネルを見ることができる - 私たちは1つを表示する必要があります時間。
結果パネル：
<div class="panel panel-default" ng-show="groupedData">
"グループ化なし" パネル：真実チェック$scope.groupedDataが良いでしょう
<div class="panel panel-default" ng-hide="groupedData">
しかし、rawDataは空の配列、groupedDataある場合には空のオブジェクト{}であり、これはtrueに解決されます。 groupedDataのキーの数を確認するためにキーチェックを行うことができます。
$scope.keys = function(obj) {
return obj && Object.keys(obj);
};
し、再度テンプレートのHTMLを更新します：これを行うために、私たちは鍵を返すために機能を追加する必要が
結果パネル：
<div class="panel panel-default" ng-show="keys(groupedData).length">
「グループ化なし」パネル：
<div class="panel panel-default" ng-hide="keys(groupedData).length">
私たちは今は良いはずです。ソリューションへ
私はあなたの例でこれをテストしているし、それは素晴らしい作品。この機能を、要求に応じて呼び出されるメソッドにどのようにアタッチするかを実証できますか？たとえば、 'no grouping'を表示すると、必要な場合のみグループ化が表示されます（たとえば、ボタンをクリックするなど）。 – Riples
拡張質問に解決策を追加 – kazenorin
これは完璧です！私はこのような詳細な回答を提供することにあなたの時間を感謝します。私の角度のスキルはまだ進行中です。それは私の知識を築くのに役立つこのような答えです。再度、感謝します！ – Riples