2017-03-03 2 views
0

J'ai une grille d'amorçage trois colonnes dans chaque ligne et mon contrôleur AngularJS me envoie les valeurs de ces colonnes (toutes les trois valeurs de colonnes sont différentes des valeurs et le nombre que j'ai code suivant:. index.html:comment remplir les valeurs de cellules bootstrap par colonne indépendamment?

<div class="container" > 
    <div id="main_row" class="row"> 
    <div id="main_row1"class="col-sm-3 col-md-99 row-height" >value1</div> 
    <div id="main_row2" class="col-sm-6 col-md-97 row-height" >value2</div> 
    <div id="main_row3" class="col-sm-3 col-md-98 row-height" >value3<br> 
    </div> 
    </div> 

    <div id="content_row12" class="row" > 
    <div id="content_t5" class="col-sm-3 col-md-99 row-height" ng-repeat="value in value1" > 
<div id="content_6" class="row" > 
<span >{{value.text}}</span> 
</div> 
    </div> 
    <div id="content_7" class="col-sm-6 col-md-97 row-height" ng-repeat="value in value2" > 
     <div id="content_8" class="row" > 
     <<span >{{value.text}}</span> 
</div> 
    </div> 
    <div id="content_tl_row_stat" class="col-sm-3 col-md-98 row-height" ng-repeat="value in value3" > 
     <div id="content_9" class="row" > 
     <<span >{{value.text}}</span> 
</div> 
    </div> 
    </div> 
    <div> 

controller.js

angular.module('value', []).controller('task_ctrl',function ($scope) { 

    $scope.value1= [ 
    {text:'value11'}, 
    {text: 'value12'} 
    ]; 
    $scope.value2 = [ 
    {text:'value21'}, 
    {text: 'value22'} 
    {text: 'value23'} 
    ]; 
    $scope.value3 = [ 
    {text:'value31'}, 
    {text: 'value32'} 
    ]; 
}); 

Je veux que l'impression devrait se présenter comme suit:


valeur1 valeur2 valeur3
value11 value21 value31
value12 value22 value32
............. value23 .............

devrait être imprimé dans la colonne. mais actuellement,


valeur1 valeur2 valeur3
value11 value12 value21
value22 value23 value31
value32 .........................

Est-il réalisable avec bootstrap dans AngularJS?

+0

Relisez l'explication du système de grille bootstrap. Vous l'utilisez mal. Il n'y a rien de tel que col-md-99. Utilisez col-offset pour votre dernière rangée et organiser vos données dans le contrôleur par des lignes et non par des colonnes –

+0

les données dans une colonne différente seront éventuellement à partir de tables différentes dans la base de données, donc je l'ai gardé comme ça. Toute aide avec cette restriction? – user3856170

+0

Aucun problème alors. Ici, la fonction d'imbrication de la grille vient à l'aide. Utilisez une nouvelle ligne à l'intérieur de chaque colonne et, dans cette rangée, faites col-sm-12 pour votre attribut ng-repeat col. Cela va créer une colonne "table" dans chacune de votre "table" principale –

Répondre

0

Il est réalisable avec bootstrap dans AngularJS. Au lieu de créer un tableau d'objets multiples en dur, créez un tableau de tableau d'objets.

Ainsi, vous devrez simplement utiliser 2 ng-repeat.

Je suppose que vous voulez afficher à la manière de (row.number) (column.number).

Vous pouvez également vérifier this link pour obtenir une approche plus simple au lieu de créer des objets manuellement uniquement pour les nombres.