0

I have a bootstrap grid three column in each row and my angularjs controller sends me values of these column( all three column values are different in values and number. i have following code: index.html:

<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'}
  ];
});

I want that print should look as follows:


value1 value2 value3
value11 value21 value31
value12 value22 value32
.............value23.............

should be printed columnwise. but Currently,


value1 value2 value3
value11 value12 value21
value22 value23 value31
value32.........................

Is it acheivable with bootstrap in AngularJS?

VikasPushkar
  • 392
  • 3
  • 18
  • Read again the explanation about bootstrap grid system again. You are using it wrong. There is no such thing as col-md-99. Use col-offset for your last row and arrange your data in the controller by rows and not by columns – Yonatan Vainer Mar 04 '17 at 01:22
  • the data in different column will eventually be from different tables in database, hence i kept it like this. Any help with this restrcition?? – VikasPushkar Mar 04 '17 at 04:31
  • No problem then. Here the nesting feature of the grid comes for help. Use new row inside each column and in this row make col-sm-12 for your ng-repeat col attribute. This will create one column "table" in each of your main "table" – Yonatan Vainer Mar 04 '17 at 10:14

1 Answers1

0

It is acheivable with bootstrap in AngularJS. Instead of hardcoding multiple object array, create an array of object array.

Thus you will have to just use 2 ng-repeat.

I am assuming you want to display in the manner of (row.number)(column.number).

You could also check this link to get a more simple approach instead of creating objects manually just for numbers.

Community
  • 1
  • 1
Sagar
  • 477
  • 4
  • 15