使用 ng-repeat 从二维数组动态页面布局答案

【问题标题】：Dynamic page layout from 2D array using ng-repeat使用 ng-repeat 从二维数组动态页面布局
【发布时间】：2018-01-16 07:04:05
【问题描述】：

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

使用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 中呈现的属性并未应用。

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

【问题讨论】：

标签： css arrays angularjs angularjs-ng-repeat

【解决方案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>

【讨论】：