【发布时间】：2016-06-05 11:30:07
【问题描述】：
我正在尝试使用从数据库中获取的 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 应用于 left 和 top 值。事实证明，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>
【问题讨论】：
标签： javascript html css angularjs