Javascript 为每个重复的迭代应用css值

我尝试为我的

ng repeat

的每次迭代应用

css

值（itemPosition）。我调用一个返回值（0到100）的函数。我应用于

css

属性

left

例如，我有以下值： 53.345、64.982或84.234

所有

左侧css

属性都设置为：84.234。 而我会：

迭代1，

左：53345

； 迭代2，

左：64982

； 迭代3，

左：84234

我的看法是：

 <div ng-repeat="item in items" ng-init="setItemPosition(item.x)" >
      <div class="circle" style="position: relative; left: {{itemPosition}}%;" >
           <div class="circle-text">{{item.value}}</div>
      </div>
 </div>

---

有可能做点什么吗？

您可以在html中呈现

数据属性

，并设置css属性：

left:attr（name\u of\u属性）

即：


.圆圈{
左：attr（数据位置）；
}
您必须将
ng样式
与
功能

查看

<div ng-repeat="item in items">
  <div class="circle" ng-style="getStyle(item.x)">
       <div class="circle-text">{{item.value}}</div>
  </div>
 </div>

CSS

 .circle {
    position: relative;
 }

查看jsfiddle
使用标记
ng style
而不是
style
在您的内联样式中执行角度表达式。现在使用所有我的值​​位于0%。为什么？你有主意吗？对不起，我不明白。当我有主意时，它就不起作用了。它始终处于0%的位置，好像css样式不适用。但是，如果我在我的html页面中设置：它可以工作！。为什么？您有什么想法吗？您是否检查了
getStyle（）
的返回值？在返回结果之前调试或放置
console.log
。我在返回样式的末尾添加了分号。我犯了一个错误，ng样式函数的返回结果应该是object，而不是string。我更新了答案。
<div ng-repeat="item in items">
  <div class="circle" ng-style="getStyle(item.x)">
       <div class="circle-text">{{item.value}}</div>
  </div>
 </div>

 $scope.getStyle = function(value) {
    var diffDate = ($scope.intervalResearchTime.endDateTime - $scope.intervalResearchTime.startDateTime) / 100;
    var valueToPercent = ((value - $scope.intervalResearchTime.startDateTime) / diffDate);
    return { left: valueToPercent + 'px' } ;
};

 .circle {
    position: relative;
 }