AngularJSとBootstrap ng-repeatテーブルの生成

Question

私は角度が新しいので、多分私の質問は簡単ですが、私はこの問題を最後の数日間解決しようとしており、私は諦めました。

画像のマトリックスを作成する必要があります（実際には、角度チャートモジュールで生成されたチャートです）。2列と動的に読み込まれる画像の数があります。 Angularのng-repeat指令を使用したいと思います。その結果、私はこのような何かを取得したい：

image

そのため、私はいくつかのコードを作成しようとしている、といくつかの考えた後、私は、この決議が見つかりました：

<div ng-repeat="item in items"> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">{{ item.name }}</h3> 
       </div> 
       <div class="panel-body"> 
        {{ item.data }} 
       </div> 
      </div> 
     </div> 

     <div class="col-lg-6" ng-init="$index = $index + 1"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">{{ item.name }}</h3> 
       </div> 
       <div class="panel-body"> 
        {{ item.data }} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

をしかし残念ながら、それはと思われますng-repeatの$ index変数の値を変更することはできません。どのようにこれを解決し、オブジェクトの配列に格納されたデータに基づいて画像の行列を動的に構築するのですか？

Answer 1

私は、あなたが正しいアプローチだと思います。以下のコードを試してみてください。コントローラーで ：

HTMLで

$scope.items = [{name:'name', data:'Image1'}, 
     {name:'A', data:'Image2'}, 
     {name:'B', data:'Image3}, 
     {name:'C', data:'Image4'}, 
     {name:'D', data:'Image4'}, 
     {name:'E', data:'Image5'}]; 

：私は最終的に異なるインデックス変数の繰り返し処理を行うことにより、この問題を解決し、以下の例のように、適切な要素を取得するためにそれを使用するために管理

<div ng-repeat="item in items"> 
     <div class="col-lg-6"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">{{ item.name }}</h3> 
       </div> 
       <div class="panel-body"> 
        {{ item.data }} 
       </div> 
      </div> 
     </div> 
</div> 

Answer 2

var app = angular.module('main', []); 
 
app.controller('DemoCtrl', function ($scope) { 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 

 
<div ng-controller="DemoCtrl" ng-app="main"> 
 

 
    
 
    <div ng-repeat="i in [1, 2, 3, 4,5,6,7,8,9,10,11,12]" style="float:left;" > 
 
    <div class="row" style='padding:10px; '> 
 
     <div class="col-lg-2" style='padding:10px;'> 
 
      <div class="panel panel-primary" style='width:200px' > 
 
       <div class="panel-heading"> 
 
        <h3 class="panel-title">{{i}}</h3> 
 
       </div> 
 
       <div class="panel-body"> 
 
        {{i}} 
 
       </div> 
 
      </div>   
 
     </div>  
 
    </div> 
 
    </div> 
 
</div>

Answer 3

 <!--Please Edit this code is that: --> 
     <div class="row"> 
    <div ng-repeat="item in items" ng-include="'content.html'"> 
    </div> 

     <!-- And make file content.html in the same folder have content: --> 

    <div class="col-lg-6"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
      <h3 class="panel-title">{{ item.name }}</h3> 
      </div> 
     <div class="panel-body"> 
       {{ item.data }} 

    </div> 
    </div> 
    </div> 

Answer 4

。

<div ng-repeat="i in [] | range:10 "> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">{{ items[i].name }}</h3> 
       </div> 
       <div class="panel-body"> 
        items[i].value 
       </div> 
      </div> 
     </div> 

     <div class="col-lg-6"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">{{ items[i+1].name }}</h3> 
       </div> 
       <div class="panel-body"> 
        items[i+1].value 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

とJSでのフィルタ：

myApp.filter('range', function() { 
    return function(input, total) { 
     total = parseInt(total); 

     for (var i=0; i<total; i=i+2) { 
      input.push(i); 
     } 
    return input; 
    }; 
});