圖中指的地方是用p寫出來的根據絕對定位來寫位置,現在想要用ng-repeat來實現多個這樣的圓圈(如果傳回來的數據裡有相關值的話),因為要用ng-repeat,所以這些p要公用一個css,用絕對定位的話所有框都擠在一起了,請問要怎麼實現呢?
漂亮男人2017-05-15 17:03:22
謝謝邀請,其實還是得用position:absoulte;
吧
張小豬也回答了方法了,ng-repeat可以根據數據來更改值啊,這樣圓的style就可以根據設定變化改變top和left的值就不會擠在一起了。
寫了個例子,可以參考下。
<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>