Angularjs Nested Md-Virtual repeat - angularjs

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>

Answer 1

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>