Question

我正在尝试使用我从数据库中获取的x和y位置值来设置页面中的元素样式。

这里我使用以下代码使用ng-repeat生成div：

<div class="col-xs-12 areaContainer">
<div class="borderOne" ng-repeat="area in mizTableList.area" ng-style="position: relative;">{{area.no}} X:{{area.x}} Y:{{area.y}}</div>
</div>

以下是我在列表变量中获取的数据库值的示例列表：

[
{"ID":655412,"user":null,"area":"1","x":"100","y":"70","no":"9","isDeleted":"0"},
{"ID":655411,"user":null,"area":"1","x":"10","y":"130","no":"8","isDeleted":"0"},
{"ID":655410,"user":null,"area":"1","x":"660","y":"530","no":"4","isDeleted":"0"},
{"ID":655409,"user":null,"area":"1","x":"530","y":"460","no":"3","isDeleted":"0"},
{"ID":655408,"user":null,"area":"1","x":"530","y":"400","no":"2","isDeleted":"0"},
{"ID":655406,"user":null,"area":"1","x":"710","y":"740","no":"24","isDeleted":"0"},
{"ID":655405,"user":null,"area":"1","x":"430","y":"740","no":"22","isDeleted":"0"},
{"ID":655423,"user":null,"area":"1","x":"570","y":"740","no":"23","isDeleted":"0"},
{"ID":655426,"user":null,"area":"1","x":"10","y":"190","no":"7","isDeleted":"0"},
{"ID":655424,"user":null,"area":"1","x":"850","y":"740","no":"25","isDeleted":"0"},
{"ID":655422,"user":null,"area":"1","x":"150","y":"740","no":"20","isDeleted":"0"},
{"ID":655414,"user":null,"area":"1","x":"150","y":"130","no":"12","isDeleted":"0"},
{"ID":655417,"user":null,"area":"1","x":"450","y":"130","no":"15","isDeleted":"0"},
{"ID":655416,"user":null,"area":"1","x":"450","y":"190","no":"14","isDeleted":"0"},
{"ID":655413,"user":null,"area":"1","x":"10","y":"10","no":"10","isDeleted":"0"},
{"ID":655418,"user":null,"area":"1","x":"790","y":"530","no":"5","isDeleted":"0"},
{"ID":655419,"user":null,"area":"1","x":"970","y":"610","no":"6","isDeleted":"0"},
{"ID":655415,"user":null,"area":"1","x":"150","y":"70","no":"13","isDeleted":"0"},
{"ID":655407,"user":null,"area":"1","x":"650","y":"340","no":"1","isDeleted":"0"},
{"ID":655421,"user":null,"area":"1","x":"450","y":"70","no":"16","isDeleted":"0"},
{"ID":655420,"user":null,"area":"1","x":"150","y":"190","no":"11","isDeleted":"0"},
{"ID":655402,"user":null,"area":"1","x":"450","y":"10","no":"17","isDeleted":"0"},
{"ID":655403,"user":null,"area":"1","x":"310","y":"10","no":"18","isDeleted":"0"},
{"ID":655401,"user":null,"area":"1","x":"10","y":"740","no":"19","isDeleted":"0"},
{"ID":655404,"user":null,"area":"1","x":"290","y":"740","no":"21","isDeleted":"0"}
]

我想要的是根据变量中的位置设置这些元素的样式。

我尝试使用ng-style，但它给了我错误。请提出解决方案。

更新：问题已解决

解决方案非常简单，但我在代码中犯了一些错误。第一个是我使用[]括号表示法为左侧和顶部值应用x和y。事实证明，角度与[]的风格不相称。我也使用ng-style来应用样式。相反，我必须使用正常工作的style属性。

以下是更新的工作解决方案：

<div class="col-xs-12 areaContainer">
<div class="borderOne" ng-repeat="area in mizTableList.area" style="position: relative;left: {{area.x}}px; top: {{area.y}}px">{{area.no}} X:{{area.x}} Y:{{area.y}}</div>
</div>

Answer 1

您可以使用ng-class

为样式元素创建子div

<div ng-repeat="area in mizTableList.area" style="position: relative;"><div class="borderOne" ng-class="condition">{{area.no}} X:{{area.x}} Y:{{area.y}}</div></div>

根据数据库值

更新：问题已解决

1 个答案: