根据数据库值进行 AngularJS 样式位置
AngularJS style position according to database value
我正在尝试使用从数据库中获取的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 样式,但它给了我错误。请提出解决方案。
更新:问题已解决
解决方案非常简单,但我在代码中犯了一些错误。第一个是我使用 [] 括号表示法将 x 和 y 应用于左侧和顶部值。事实证明,角度在风格上与 [] 配合不佳。我也使用 ng 样式来应用样式。相反,我不得不使用正常工作的样式属性。
以下是更新的工作解决方案:
<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>
您可以使用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>
相关文章:
- 使用 AngularJS 设置活动选项卡样式
- 如何在 angularjs 中设置多个条件来设置样式
- AngularJS忽略内联样式
- 在回调AngularJS ng-click样式中执行fn(param1,param2)
- AngularJS+jQuery Mobile w/无适配器&禁用路由-仅用于UI样式
- AngularJS和带有ng重复的ng样式
- 在AngularJS中构建SPA应用程序与纯JavaScript - 选择哪种Boostrap进行样式设置
- 使用 ng 样式进行背景渐变时出现 AngularJS 语法错误
- IE中的AngularJS错误与样式与ng样式
- 根据数据库值进行 AngularJS 样式位置
- AngularJS ng 样式不随属性变化
- 以 ng 样式获取当前日期 - Angularjs
- 更改 POST AngularJS 上的按钮样式
- AngularJS:动态样式表链接标记过早触发请求
- 使用jQuery脚本将CSS样式应用于angularjs表达式
- 如何在AngularJS中为单个元素使用ng样式的多个对象
- 如何在AngularJS中为img元素设置边框样式
- 输入字段的样式字体(Angularjs)
- 将数组样式的查询参数传递给Angularjs中的资源
- 当ng模型在文本字段中发生变化时,使用AngularJS对标签进行样式设置