Question

我想代表一个楼层（房间数量可变）。例如，我有这个数据集：

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  |
+---------+                   +---------+

使用md-grid-list和一些md-grid-tile我无法正确定位一个集团（size属性为md-rowspan和md-colspan ）。

我的解决方法是创建假md-grid-tile以便按我的意愿设置布局。但是，这个解决方案肯定不是最好的，我甚至不确定它是否可以正常工作。

有没有什么好方法可以将我的网格图块放在特定位置？

Answer 1

我玩这个有点似乎是可行的。我还没有弄清楚所有的逻辑，但这应该让你有点接近：

<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>

我认为基本上缺少的是你必须检查你的房间，找出外部尺寸，将位置转换成行和＆amp;列跨越，插入＆＃34;空房间＃34;在空白区域，并在空房间使用不同的css课程。所以它们不可见。

将md-grid-tile完全定位在md-grid-list中

1 个答案: