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

标签 css arrays angularjs angularjs-ng-repeat

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

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

和我在 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 中呈现的属性。

我是不是漏掉了一些基本的东西,还是应该尝试不同的方法?

最佳答案

widthheightlefttop 不是有意义的 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/

相关文章:

iphone - Objective C/iPhone 应用程序中的直方图生命周期数据类型

c - *array[] 是什么意思?

javascript - CSS 和 Javascript 未加载

css - IE6 float 元素环绕问题

ruby - 如何在 Ruby 中检测数组中的重复值?

angularjs - Angular 2 测试 - 组件状态在测试之间持续存在(即不重置)

javascript - 修改子 Controller 内父 Controller 的变量AngularJS 1.x

javascript - Angular - 路由解决服务问题

javascript - 是否可以编辑现有网页的 CSS?

html - 响应式 3 列布局