The place pointed to in the picture is written with p. The position is written based on absolute positioning. Now I want to use ng-repeat to achieve multiple such circles (if passed back If there are relevant values in the data), because ng-repeat is used, these ps need to share a css. If absolute positioning is used, all the boxes will be crowded together. How to achieve this?
漂亮男人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.
