Darkroro Darkroro - 2 months ago 10
AngularJS Question

Angular ng-class weird result

sorry for my english if not very good,

I'm new in angular, so I may have done something wrong.

I read some post here but I can't find any solution to the result I have with ng-class.

Here is my code:

My controller...

function ItemCtrl($scope, Item) {
var items = Item.all();
for(var i = 0, ln = items.length; i < ln; i++) {
if(moment(items[i].enddate).isBefore(moment(), 'day')) {
items[i].ended = true;
} else {
items[i].ended = false;
}
}
$scope.items = items;
}


My html template (linked to my controller via the routeProvider)...

<ul>
<li ng-repeat="item in items">
<div class="col-xs-8">
<a ng-class="{endeditem: item.ended}" href="#/item/{{item._id}}">{{item.name}}</a>
</div>
<div class="col-xs-1 right">end:</div>
<div class="col-xs-2 right">{{item.enddate | moment:'LL'}}</div>
</li>
</ul>


What I want is list all items and put 'endeditem' css rule on those which are ended.

This code display my item list but doesn't add the 'endeditem' class on the ended item except when I go in debug mode and do a step by step execution... (I put a breakpoint on 'for' in the controller).

I precise, when I check the content of my item list, some of them have the property ended: true and some other ended: false.

Could someone help me understanding what I'm doing wrong ?

Answer

Finaly with your help and some research, I did this :

function ItemCtrl($scope, Item) {
    var items = Item.all(function() {
        for(var i = 0, ln = items.length; i < ln; i++) {
            if(moment(items[i].enddate).isBefore(moment(), 'day')) {
                items[i].ended = true;
            } else {
                items[i].ended = false;
            }
        }
    });
    $scope.items = items;
}

Thanks for your help ;-)