Angularjs create row for every 3 columns

Question

I have a json nested array as shown in this fiddle and i want to display the elements as rows and columns. Each row should have 3 columns. I got this fiddle where same is done but it has simple json array.Here ng-if condition is used to break the data into rows.

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4">{{products[$index + 1]}}</div>
    <div class="col-xs-4">{{products[$index + 2]}}</div>
</div>

But in my case i want to display the array as shown in table structure shown in the fiddle. Also if there is any null objects then it should be ignored. How it can be done? Any idea?

@DeblatonJean-Philippe I tried using same logic as mentioned in that fiddle but how do i get the data to be displayed from the nested array? — Navaneet
– Navaneet, Commented Oct 30, 2015 at 8:54
Nice Problem. Similar to this. But this problem should have better and easy solution. stackoverflow.com/questions/27037772/… — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Oct 30, 2015 at 9:00

Nidhish Krishnan · Accepted Answer · 2015-10-30 10:05:53Z

3

Just simple try like this

Working Demo

<div ng-controller="MyCtrl">
    <div ng-repeat="products in items"> 
       <div ng-repeat="product in products">
          <div class="col-xs-4" >{{product.IDTYPE}}</div>
      </div>
    </div>
</div>

edited Oct 30, 2015 at 10:05

answered Oct 30, 2015 at 8:58

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Navaneet Over a year ago

No . U didnt get my problem. I want to display the IDTYPE only. I have shown the pattern in the fiddle. see this jsfiddle.net/Vwsej/634

Nidhish Krishnan Over a year ago

@Navaneeth Is this you want

Navaneet Over a year ago

Yes, but can you tell me how rows are created?I don't see any conditional expression for creating rows

Nidhish Krishnan Over a year ago

@Navaneeth it is working because it is using bootstrap css col-xs-4 for div, if you want to check remove col-xs-4 from div and try

Nidhish Krishnan Over a year ago

@Navaneeth Don't forget to mark it as answer if it satisfies your requirement.

Rahul Singh · Accepted Answer · 2015-10-30 09:18:49Z

1

I think you want something like this:

<div ng-controller="MyCtrl"> 
   <div> I want to display in below table structure</div><br/>
    <div ng-repeat="item in items">
        <div class="row" ng-if="{$index%3==0}">
            <div ng-repeat="x in item" class="col-xs-4">{{x.IDTYPE}}</div>
        </div>
    </div>
</div>

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.items = [{
    "b": {
        "PRIMKEY": 96598.0,
        "IDTYPE": "userlogin",
        "USERID": "yes"
    },
    "c": {
        "PRIMKEY": 106974.0,
        "IDTYPE": "user_access",
        "USERID": "no"
    },
    "d": {
        "PRIMKEY": 107009.0,
        "IDTYPE": "Tel_ty",
        "USERID": "no"
    },
    "e": {
        "PRIMKEY": 60130.0,
        "IDTYPE": "new_user",
        "USERID": "no"
    },
    "f": {
        "PRIMKEY": 90885.0,
        "IDTYPE": "gen_id",
        "USERID": "001_0_2361"
    },
    "g": null,
    "h": {
        "PRIMKEY": 106996.0,
        "IDTYPE": "uyy_id",
        "USERID": "753"
    },
    "i": {
        "PRIMKEY": 106993.0,
        "IDTYPE": "qwe_id",
        "USERID": "585"
    },
    "j": {
        "PRIMKEY": 104831.0,
        "IDTYPE": "phone_login",
        "USERID": "122324"
    },
    "k": {
        "PRIMKEY": 85476.0,
        "IDTYPE": "windows_id",
        "USERID": "qwertr"
    }
}];
}

You can check this fiddle.

edited Oct 30, 2015 at 9:18

answered Oct 30, 2015 at 8:56

Rahul Singh

8929 silver badges24 bronze badges

2 Comments

Navaneet Over a year ago

No . U didnt get my problem. I want to display the IDTYPE only. I have shown the pattern in the fiddle. see this jsfiddle.net/Vwsej/634

Rahul Singh Over a year ago

Updated my answer check it now.

Partha Sarathi Ghosh · Accepted Answer · 2015-10-30 09:38:51Z

1

Here is a very good solution if you use angular.filter https://github.com/a8m/angular-filter

Use chunkBy

Code will be look like

<div ng-repeat="productRow in products| chunkBy: 3">
   <div class="row" ng-repeat="product in productRow">
      <div class="col-xs-4">{{product}}</div>
   </div>
</div>

answered Oct 30, 2015 at 9:38

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

Comments

IggY · Accepted Answer · 2015-10-30 09:11:32Z

I think is will fit your needs, let me know if it doesn't.

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {

    var items = [{
      "b": {
        "PRIMKEY": 96598.0,
        "IDTYPE": "userlogin",
        "USERID": "yes"
      },
      "c": {
        "PRIMKEY": 106974.0,
        "IDTYPE": "user_access",
        "USERID": "no"
      },
      "d": {
        "PRIMKEY": 107009.0,
        "IDTYPE": "Tel_ty",
        "USERID": "no"
      },
      "e": {
        "PRIMKEY": 60130.0,
        "IDTYPE": "new_user",
        "USERID": "no"
      },
      "f": {
        "PRIMKEY": 90885.0,
        "IDTYPE": "gen_id",
        "USERID": "001_0_2361"
      },
      "g": null,
      "h": {
        "PRIMKEY": 106996.0,
        "IDTYPE": "uyy_id",
        "USERID": "753"
      },
      "i": {
        "PRIMKEY": 106993.0,
        "IDTYPE": "qwe_id",
        "USERID": "585"
      },
      "j": {
        "PRIMKEY": 104831.0,
        "IDTYPE": "phone_login",
        "USERID": "122324"
      },
      "k": {
        "PRIMKEY": 85476.0,
        "IDTYPE": "windows_id",
        "USERID": "qwertr"
      }
    }];
    $scope.items = [];
    function format() {
      for (var item in items[0]) {
        var i = items[0][item]
        if (i) $scope.items.push(i.IDTYPE);
      }
    }
    format();
  });

<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.5/css/bootstrap.min.css">
<div ng-app="App" ng-controller="Ctrl" class="container">
    <div ng-repeat="item in items" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4">{{items[$index]}}</div>
        <div class="col-xs-4">{{items[$index + 1]}}</div>
        <div class="col-xs-4">{{items[$index + 2]}}</div>
    </div>
</div>

Collectives™ on Stack Overflow

Angularjs create row for every 3 columns

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related