Question

我有一个服务器应用程序，我正在查询布局并获取以下信息 - 对象左上角的坐标及其宽度和高度。数据显示为2D数组。

使用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">&nbsp;</div.
  </div>
</div>

和控制器中的数组：

 $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中呈现的属性。

我错过了一些基本的东西，还是我应该尝试不同的方法？

Answer 1

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>

使用ng-repeat从2D数组中动态页面布局

1 个答案: