javascript - 根据数据库值的 AngularJS 样式位置

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 应用于左值和上值。事实证明，angular 在风格上不能很好地与 [] 搭配。 我还使用 ng-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>