CODEWITHSUNDEEP
angularjschecklist-model
Tharindu Senanayake
Tharindu Senanayake

Reputation: 285

Display data from ng-repeat in multiple columns

I'm getting list of data from Db to a view using ng-repeat. In order to select multiple values at once I'm using checklist-model. My code is as follows,

<div ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

This will return a long list one below another. What I need is to get these data in the list to be displayed in 4 columns. Any help please!

This was my previous question. For the answer for this I got this

<table>
   <tr>
      <td ng-repeat="item in items">
          <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
      </td>
   </tr>
</table>

and this

<div ng-repeat="item in items" style="display:inline-block;">
  <input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>

These codes make sure that the data are in a same row. But what I want is to add values into 4 separate columns. If there are 1000 data I need 200 data to be in one column, 200 in the second and so on. Please not that I'm using checklist-model

Upvotes: 2

Views: 5680

Answers (2)

Tharindu Senanayake
Tharindu Senanayake

Reputation: 285

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+1]}}</div>
    <div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+2]}}</div>
</div>

This did the trick. Thanks to @KhalidHussain

Upvotes: 1

Nikhil Vaghela
Nikhil Vaghela

Reputation: 222

Hi Please try this and use logic 

  var app = angular.module("app",[]);
    
    app.controller("MyCtrl" , function($scope){
      
      $scope.index = 0;
       $scope.items =["str1", "str2", "str3","str4","str5","str6","str7","str8","str9","str10"];
       $scope.array = [];
      for(var i=0; i<$scope.items.length/5;i++)
        $scope.array.push(i);
      });
    
<html>
      <head>
        <title>My Angular App!</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
       
      </head>
      
      <body>
    	
    	
    	
    	<div ng-app="app" ng-controller="MyCtrl">
       
      <table>
        <tr>
          <td>Col1</td>
          <td>Col2</td>
          <td>Col3</td>
          <td>Col4</td>
    	  <td>Col5</td>
          </tr>
         <tr ng-repeat="i in array"  ng-init="index = i*5">
           
             <td ng-repeat="one in items.slice(index,index+5)">{{one}}</td>
         </tr>
     </table>
      
    </div>
    
    	
    	
      </body>
      
      
    </html>

Upvotes: 2

Related Questions