图中指的地方是用p写出来的根据绝对定位来写位置,现在想要用ng-repeat来实现多个这样的圆圈(如果传回来的数据里有相关值的话),因为要用ng-repeat,所以这些p要公用一个css,用绝对定位的话所有框都挤在一起了,请问要怎么实现呢?
漂亮男人2017-05-15 17:03:22
Thank you for the invitation. In fact, you still have to use itposition:absoulte;
Zhang Xiaozhu also answered the method. ng-repeat can change the value according to the data, so that the round style can change the top and left values according to the setting changes without crowding. Together.
I wrote an example for your reference.
<style type="text/css">
.wrap{
position: relative;
}
.circle{
background: #CCC;
border-radius:50%;
position: absolute;
width:20px;
height:20px
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p class="wrap" ng-repeat="x in circles">
<p class="circle" style=top:{{x.top}};left:{{x.left}}></p>
</p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.circles = [
{top:"10px",left:"20px"},
{top:"30px",left:"80px"},
{top:"50px",left:"180px"},
{top:"70px",left:"100px"},
]
});
</script>
伊谢尔伦2017-05-15 17:03:22
I don’t quite understand the meaning of the question. Since it has been positioned, the values of top and left can naturally be determined based on the data, thus achieving the purpose of creating circles at many different positions.