Apply css value for each iteration ng-repeat

Question

I try to apply a css value (itemPosition) for each iteration of my ng-repeat. I call a function that returns me a value (0 to 100). I applied to the css property left.

For example, I have the following values: 53.345, 64.982 or 84.234

All left css properties are set to: 84.234. While I would have:

iteration 1, left: 53345; iteration 2, left: 64982; iteration 3, left: 84234;

My view :

 <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>

In my controller, i have this function (The function returns a percentage) :

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

It's possible to do something ?

Use the tag ng-style instead of style to execute Angular Expressions within your in-line style. — Pete
– Pete, Commented Apr 15, 2014 at 14:07

Fizer Khan · Accepted Answer · 2014-04-16 08:24:55Z

1

You have to use ng-style with function

View

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

Controller

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

Check out jsfiddle http://jsfiddle.net/fizerkhan/eXL28/3/

edited Apr 16, 2014 at 8:24

answered Apr 15, 2014 at 14:24

Fizer Khan

93.7k30 gold badges147 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Chéramy Alexandre Over a year ago

Now all my values are located at 0 percent. why ? Do you have an idea?

Fizer Khan Over a year ago

Sorry, i dont understand.

Chéramy Alexandre Over a year ago

When i do, <div class="circle" ng-style="getStyle(item.x)"> it doesn't work. It is all the time at position 0%, as if the css style does not apply. However, if I set in my html page <div class="circle" style="left: 80%;"> : It Works!. Why? Do you have an idea?

Fizer Khan Over a year ago

Did you check the return values of getStyle()? Debug or put console.log before returning result. I have added semicolons at the end in the return style.

Fizer Khan Over a year ago

I made a mistake, the return result of ng-style function should be object, NOT a string. I updated the answer.

|

Eru · Accepted Answer · 2014-04-15 14:09:15Z

0

you can render data-attr in the html and set a css property: left: attr(name_of_attribute);

I.e:

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


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

answered Apr 15, 2014 at 14:09

Eru

6754 silver badges8 bronze badges

Collectives™ on Stack Overflow

Apply css value for each iteration ng-repeat

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related