Angularjs creates a row for every 3 columns

Question

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

<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 the structure of the table shown in the violin. Also, if there are null objects, it should be ignored. How can I do that? Any idea?

Answer 1

Just try it 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>

Answer 2

, - :

<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"
    }
}];
}

fiddle.

Answer 3

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

Use chunkby

The code will 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>

Answer 4

I think this will suit your needs, let me know if it is not.

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>

Run codeHide result