Angularjs Nested Md-Virtual repeat

Question

I have the following JSON object:

[
  {
    "districtId": 1,
    "districtAddress": "108 N MAIN ST",
    "offices": [
      {
        "Id": 11,
        "name": "test",
        "City": "ATMORE"
      },
      {
        "Id": 22,
        "name": "test",
        "City": "ATMORE"
      }
    ]
  },
   {
    "districtId": 2,
    "districtAddress": "108 N MAIN ST",
    "offices": [
      {
        "Id": 33,
        "name": "test",
        "City": "ATMORE"
      },
      {
        "Id": 44,
        "name": "test",
        "City": "ATMORE"
      }
    ]
  },
   {
    "districtId": 3,
    "districtAddress": "108 N MAIN ST",
    "offices": [
      {
        "Id": 55,
        "name": "test",
        "City": "ATMORE"
      }
    ]
  }
]

I want to show this data using md-virtual-repeat directive. First level repeater works when I use this directive. But when I try to render the inner data using the same directive - it doesn't work as expected. How can use md-virtual-repeat for the nested repeater (I want to get rid of ng-repeat on md-list-item element)?

Here is my code:

angular
  .module('MyApp',['ngMaterial'])
  .controller('AppCtrl', function($scope) {
  var self = this;
    self.items = [];
    for (var i = 0; i < 1000; i++) {
      var item = {
        nbr: i,
        items: []
      };
      for(var m = 0; m < 10; m++) {
        item.items.push({
          nbr: m,
          checked: true
        });
      }
      self.items.push(item);
    }

  });

.virtualRepeatStoreList .vertical-container {
    height: 500px;
    width: 100%;
}

.virtualRepeatStoreList .repeated-item {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;;
    height: 40px;
    padding-top: 10px;
}
.virtualRepeatStoreList md-content {
    margin: 16px;
}


.virtualRepeatStoreList .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
    padding-left: 5px;
}

<link rel="stylesheet prefetch" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.css">
<link rel="stylesheet prefetch" href="https://material.angularjs.org/1.1.0/docs.css">

<div ng-controller="AppCtrl as ctrl"  class="content virtualRepeatStoreList" ng-app="MyApp">
  <md-virtual-repeat-container class="vertical-container" style="height:550px">
    <div md-virtual-repeat="item in ctrl.items">
    <md-card flex="">
      <md-card-title>
        <md-card-title-text>
          <span class="md-display-2">{{ item.nbr }}</span>
        </md-card-title-text>
      </md-card-title>
      <md-list style="overflow:auto;height:auto;" flex ng-cloak layout="column">
        <md-divider></md-divider>
        <md-list-item layout="row" class="noright">
          <md-subheader flex>Item</md-subheader>
        </md-list-item>
        <md-list-item ng-repeat="it in item.items" style="max-height:40px;overflow:hidden;" class="noright">
          <p>{{ it.nbr }}</p>
          <md-checkbox class="md-secondary" ng-model="it.checked"></md-checkbox>
        </md-list-item>
      </md-list>
    </md-card>
  </div>
  </md-virtual-repeat-container>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.js"></script>

Here's a codepen that accomplishes this: codepen.io/semihgk/pen/Pzrwkj. Without providing anything other than your data structure you're not going to get much help. — Mike Feltman
– Mike Feltman, Commented Aug 10, 2017 at 18:06
@StanislavKvitash hi i do have another dbt. That md virtual repeat data is loading only after the window resize. Any solution for this??? — Jobelle
– Jobelle, Commented Aug 15, 2017 at 17:49

Stanislav Kvitash · Accepted Answer · 2017-08-11 19:07:35Z

You need to wrap each nested md-virtual-repeat with md-virtual-repeat-container like:

angular
  .module('MyApp',['ngMaterial'])
  .controller('AppCtrl', function($scope) {
  var self = this;
    self.items = [];
    for (var i = 0; i < 1000; i++) {
      var item = {
        nbr: i,
        items: []
      };
      for(var m = 0; m < 10; m++) {
        item.items.push({
          nbr: m,
          checked: true
        });
      }
      self.items.push(item);
    }

  });

.virtualRepeatStoreList .vertical-container {
    height: 500px;
    width: 100%;
}

.virtualRepeatStoreList .repeated-item {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;;
    height: 40px;
    padding-top: 10px;
}
.virtualRepeatStoreList md-content {
    margin: 16px;
}


.virtualRepeatStoreList .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
    padding-left: 5px;
}

md-list-item.md-no-proxy.md-no-padding {
  padding: 0;
}

<link rel="stylesheet prefetch" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.css">
<link rel="stylesheet prefetch" href="https://material.angularjs.org/1.1.0/docs.css">

<div ng-controller="AppCtrl as ctrl"  class="content virtualRepeatStoreList" ng-app="MyApp">
  <md-virtual-repeat-container class="vertical-container" style="height:550px">
    <div md-virtual-repeat="item in ctrl.items">
    <md-card flex="">
      <md-card-title>
        <md-card-title-text>
          <span class="md-display-2">{{ item.nbr }}</span>
        </md-card-title-text>
      </md-card-title>
      <md-list style="overflow:auto;height:auto;" flex ng-cloak layout="column">
        <md-divider></md-divider>
        <md-list-item layout="row" class="noright md-no-padding">
          <md-subheader flex>Item</md-subheader>
        </md-list-item>
        <md-virtual-repeat-container class="vertical-container" style="height:125px">
          <md-list-item md-virtual-repeat="it in item.items" style="max-height:40px;overflow:hidden;" class="noright">
            <p>{{ it.nbr }}</p>
            <md-checkbox class="md-secondary" ng-model="it.checked"></md-checkbox>
          </md-list-item>
        </md-virtual-repeat-container>
      </md-list>
    </md-card>
  </div>
  </md-virtual-repeat-container>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0/angular-material.js"></script>

Collectives™ on Stack Overflow

Angularjs Nested Md-Virtual repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related