在使用cycle进行循环时如何正确使用ngRepeat

Question

I'm trying to color dates in list using this:

HTML

<div id="list" ng-controller = "listContr as ilist">
  <ul>
    <li ng-repeat = "item in ilist.items">
      <p class="date-{{ilist.dateColor()}}">{{item.dueDate| date: 'dd.MM.yyyy HH:mm'}}</p>
    </li>
  </ul>
</div>

javascript

app.controller ('listContr', function () {
    this.items = tasks;
    this.dateColor = function () {
    for (var i = 0; i <= tasks[i].length; i++) {
        if (currDate > tasks.dueDate) {return 1} esle {return 2};
    }
};)};

but it never returns 2 (or dates just colored again in 1). I guess that ngRepeat makes items inherit previous properties. So I have no idea how to fix it.

Answer 1

Change the signature of your function to take the item from ngRepeat, so your function knows which item you are about to color.

<div id="list" ng-controller = "listContr as ilist">
  <ul>
    <li ng-repeat = "item in ilist.items">
      <p class="date-{{ilist.dateColor(item)}}">{{item.dueDate| date: 'dd.MM.yyyy HH:mm'}}</p>
    </li>
  </ul>
</div>

Then you may also get rid of the loop in the function

app.controller ('listContr', function () {
        this.items = tasks;
        this.dateColor = function (item) {
            if (currDate > item.dueDate) {return 1} esle {return 2};
        };)};

(Note: I have not check this in a browser, just ajusted your code to show the concept)