Question

我尝试为css的每次迭代应用ng-repeat值（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; }

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

Answer 2

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

即：

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


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

为每次迭代ng-repeat应用css值

2 个答案: