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, Oct 30 '15 at 08:54
Nice Problem. Similar to this. But this problem should have better and easy solution. http://stackoverflow.com/questions/27037772/show-only-open-div-with-angular-if — Partha Sarathi Ghosh, Oct 30 '15 at 09:00

Nidhish Krishnan · Accepted Answer · 2015-10-30T10:05:53.177

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 '15 at 10:05

answered Oct 30 '15 at 08:58

Nidhish Krishnan

20,593
6
63
76

No . U didnt get my problem. I want to display the IDTYPE only. I have shown the pattern in the fiddle. see this http://jsfiddle.net/Vwsej/634/ – Navaneet Oct 30 '15 at 09:00
@Navaneeth Is this you want – Nidhish Krishnan Oct 30 '15 at 09:08
Yes, but can you tell me how rows are created?I don't see any conditional expression for creating rows – Navaneet Nov 03 '15 at 07:32
@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 Nov 03 '15 at 13:48
@Navaneeth Don't forget to mark it as answer if it satisfies your requirement. – Nidhish Krishnan Nov 03 '15 at 13:49

Rahul Singh · Answer 2 · 2015-10-30T09:18:49.497

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.

No . U didnt get my problem. I want to display the IDTYPE only. I have shown the pattern in the fiddle. see this http://jsfiddle.net/Vwsej/634/ — Navaneet, Oct 30 '15 at 09:00

score 1 · Answer 3 · answered Oct 30 '15 at 09:38

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>

score 0 · Answer 4 · answered Oct 30 '15 at 09:11

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>

Angularjs create row for every 3 columns

4 Answers4