var rooms = [
{
name: 'Room 1',
position: {x: 0, y: 0},
size: {x: 2, y: 1}
},
{
name: 'Room 2',
position: {x: 2, y: 0},
size: {x: 2, y: 1}
},
{
name: 'Room 3',
position: {x: 0, y: 1},
size: {x: 1, y: 2}
},
{
name: 'Room 4',
position: {x: 3, y: 1},
size: {x: 1, y: 2}
}
]
+-------------------+-------------------+
| | |
| | |
| Room 1 | Room 2 |
+---------+---------+---------+---------+
| | | |
| | | |
| | | |
| | | |
| | | |
| Room 3 | | Room 4 |
+---------+ +---------+
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css" />
<style>
.red {
background: #ff8a80; }
</style>
</head>
<body ng-app="app" ng-controller="roomController as ctrl">
<md-grid-list md-cols="5" md-row-height="4:3" md-gutter="12px">
<md-grid-tile ng-repeat="room in ctrl.rooms" md-colspan="{{room.size.x}}" md-rowspan="{{room.size.y}}" class="red">{{room.name}}
</md-grid-tile>
</md-grid-list>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js "></script>
<script>
angular.module("app",["ngMaterial"]).controller("roomController",roomController)
function roomController() {
var vm = this
vm.rooms = [
{
name: 'Room 1',
position: {x: 0, y: 0},
size: {x: 2, y: 1}
},
{
name: 'Room 2',
position: {x: 2, y: 0},
size: {x: 2, y: 1}
},
{
name: 'Room 3',
position: {x: 0, y: 1},
size: {x: 1, y: 2}
},
{
name: 'Room 4',
position: {x: 3, y: 1},
size: {x: 1, y: 2}
}
]
return
}
</script>
</body>
</html>
