浮動小数点数列

Question

データを表示するかどうかを定義するチェックボックスのリストを作成するには、角度を使用しています。

$scope.data = [ 
    {name: "Data1", shown: true}, 
    {name: "Data2", shown: true}, 
    {name: "Data3", shown: true}, 
    {name: "Data4", shown: true}, 
    {name: "Data5", shown: true}, 
    {name: "Data6", shown: true} 
    ]; 

このデータは、このようにデータの配列全体にフィットすることができない、限られた高さを有するtopbar、上に示されています。私が達成したい何

<div class="contentBar"> 
    <div class="content" ng-repeat="item in data" ng-if="item.shown">{{item.name}}</div> 
</div> 

です：場合には、データの4つの以上の目に見えるインスタンス、最後の二つは、この行の右側に、別の縦の列に配置する必要がありますがあります。

ここには、このケースの小さなデモプランナーがあります。

http://plnkr.co/edit/vVysWYR5FLzIBh8zP8th?p=preview

Answer 1

あなたはCSSフレキシボックスを使用することができます。これを達成するための方法を

.contentBar { 
    display: flex; 
    flex-flow: column wrap; 
} 

Answer 2

あなたは、静的な高さとデータを動的に来て適用するので、.contentBar DIVからの高さを削除する必要があります。あなたのstyle.cssの変化

.contentBar{ 
    margin-top: 1em; 
    background-color: black; 
    width: 30em; 
} 

.content { 
    color: red !important; 
    font-weight:bold; 
} 

乾杯男下記の変更をしてください。

Answer 3

エレガントな方法は、フレックスボックスを使用することです。 更新されたpluncker hereをご覧ください。

キーはcontentBarに追加された最後の3つのCSSルールです：

.contentBar{ 
    margin-top: 1em; 
    background-color: black; 
    width: 30em; 
    height: 5em; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

フレックスボックスに非常に良いガイドがCSS tricks siteで見つけることができます。