フレックスボックスを使用してデータを表示

Question

フレックスボックスを使用し、データセットをループしてデータを印刷します。

私のコードは次のとおりです。

<div ng-app="myapp" ng-controller="FirstCtrl"> 

    <div ng-repeat="name in names" class="graph-wrapper"> 
     <div class="aside-1 content"> 
      {{name.first}} 
     </div> 

     <div class="graph-main content"> 
      {{name.address}} 
     </div> 
    </div> 
</div> 

とコントローラ：

var myapp = angular.module('myapp', []); 
myapp.controller('FirstCtrl', function ($scope) { 
    $scope.names = [ 
     { id: 1, first: 'John', address: 'xxxxxxxxxxxxx' }, 
     { id: 2, first: 'Rocky', address: 'yyyyyyyyyyyyyy' }, 
     { id: 3, first: 'John', address: 'ttttttttttttttt' }, 
     { id: 4, first: 'Ben', address: 'pppppppppppppppp' } 
    ]; 
}); 

とCSS：

：私はこのようなもので終わるしかし

.graph-wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

.graph-wrapper > * { 
    flex: 1 50%; 
    order: 1; 
} 

.graph-main { 
    flex: 12 0px; 
} 

.aside-1 { 
    flex: 1; 
} 

.content { 
    border: 1px grey solid; 
} 

しかし、私は（重要なデータの順番れていない）、それは次のようになりたい：

それは一つのループでこれを行うことは可能ですか？

このフィドルはhereです。

Answer 1

あなたはまた、フレックスボックスなどの主要コンテナを設定することができます。 https://codepen.io/gc-nomade/pen/aWBxPV

var myapp = angular.module('myapp', []); 
 
myapp.controller('FirstCtrl', function($scope) { 
 
    $scope.names = [{ 
 
     id: 1, 
 
     first: 'John', 
 
     address: 'xxxxxxxxxxxxx' 
 
    }, 
 
    { 
 
     id: 2, 
 
     first: 'Rocky', 
 
     address: 'yyyyyyyyyyyyyy' 
 
    }, 
 
    { 
 
     id: 3, 
 
     first: 'John', 
 
     address: 'ttttttttttttttt' 
 
    }, 
 
    { 
 
     id: 4, 
 
     first: 'Ben', 
 
     address: 'pppppppppppppppp' 
 
    } 
 
    ]; 
 
});

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.graph-wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 50%; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
} 
 

 
.graph-wrapper>* { 
 
    flex: 1 50%; 
 
    order: 1; 
 
} 
 

 
.graph-main { 
 
    flex: 4; 
 
} 
 

 
.aside-1 { 
 
    flex: 1; 
 
} 
 

 
.content { 
 
    border: 1px grey solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
 

 
<div ng-app="myapp" ng-controller="FirstCtrl" class="flex"> 
 

 
    <div ng-repeat="name in names" class="graph-wrapper"> 
 
    <div class="aside-1 content"> 
 
     {{name.first}} 
 
    </div> 
 

 
    <div class="graph-main content"> 
 
     {{name.address}} 
 
    </div> 
 
    </div> 
 
</div>