我有一个服务器应用程序,我正在查询布局并获取以下信息 - 对象左上角的坐标及其宽度和高度。数据以二维数组的形式呈现。
使用 ng-repeat
我尝试遍历数组,如下所示 plunk .
这是 HTML 模板代码:
<div ng-controller="PositionDemoCtrl" width="1000px" height="1000px">
<div data-ng-repeat="option in options track by $index">
<div width="{{option[0]}}" height="{{option[1]}}" top="{{option[2]}}px" left="{{option[3]}}px"> </div.
</div>
</div>
和我在 Controller 中的数组:
$scope.options = [[26,33,36,891],[25,29,72,341],
[17,20,145,0],[1,4,181,288],[17,25,363,0],[11,33,363,262],[30,54,399,944],[23,29,508,524],[17,16,690,236]];
每个子数组按照宽度、高度、顶部和左侧的顺序表示布局数据。
我发现我所有的 div 都具有相同的高度,并且未应用虽然在 HTML 中呈现的属性。
我是不是漏掉了一些基本的东西,还是应该尝试不同的方法?
最佳答案
width
、height
、left
和 top
不是有意义的 HTML 属性。虽然您可以设置它们,但它们不会对 DOM 元素产生任何风格影响。相反,您应该设置相应的 CSS 属性。您可以使用 ng-style
指令来做到这一点。
<div ng-style="{
'width': option[0] + 'px',
'height': option[1] + 'px',
'top': option[2] + 'px',
'left': option[3] + 'px'
}"></div>
关于css - 使用 ng-repeat 从二维数组动态页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48270130/