为每个迭代应用css值ng repeat

Question

我尝试为ng-repeat的每次迭代应用一个css值（itemPosition）。我调用一个函数，该函数返回一个值（0到100）。我应用了css属性left。

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

所有left css属性都设置为：84.234。而我会：

迭代1，left: 53345；迭代2，left: 64982；迭代3，left: 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>

在我的控制器中，我有这个函数（函数返回百分比）：

 $scope.setItemPosition = function(value) {
    var diffDate = ($scope.intervalResearchTime.endDateTime - $scope.intervalResearchTime.startDateTime) / 100;
    var valueToPercent = ((value - $scope.intervalResearchTime.startDateTime) / diffDate);
    $scope.itemPosition = valueToPercent; //exemple = 84.234;
};

有可能做点什么？

Answer 1

您必须将ng-style与function 一起使用

查看

<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' } ;
};

CSS

 .circle {
    position: relative;
 }

查看jsfiddlehttp://jsfiddle.net/fizerkhan/eXL28/3/

Answer 2

您可以在html中渲染data-attr并设置css属性：left: attr(name_of_attribute);

I.e:

<div class='circle' data-position='{{itemPosition}}%'></div>

.circle {
  left: attr(data-position);
}