CODEWITHSUNDEEP
angularjs
Lothereus
Lothereus

Reputation: 3919

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 ?

Upvotes: 1

Views: 208

Answers (5)

EJUNIKA
EJUNIKA

Reputation: 83

The syntax of ngClass is 

<ANY ng-class="expression">...</ANY>

where the result of the expression can be a string representing space delimited class names, an array, or a map of class names to boolean values.

In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

In your case you can use 

ng-class="{'endeditem': item.ended}"

Upvotes: 1

Lothereus
Lothereus

Reputation: 3919

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

Upvotes: 1

GregL
GregL

Reputation: 38131

If Item.all() returns a promise as you mentioned, then you need to do all the interaction with the items array inside a callback function passed to .then() like so:

function ItemCtrl($scope, Item) {
    Item.all().then(function (items) {
        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;
    });
}

Upvotes: 1

Python Basketball
Python Basketball

Reputation: 2370

i think you can't use ng-class correctly, should be like this:

ng-class="{true: 'endeditem', false: ''}[item.ended]"

html:

 <ul>
        <li ng-repeat="item in items">
            <div class="col-xs-8">
                <a ng-class="{true: 'endeditem', false: ''}[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>

hope it helps you!

Upvotes: 0

Prashanth
Prashanth

Reputation: 59

The usage of ng-class is incorrect. For the detailed how to, i suggest the the below link.

https://scotch.io/tutorials/the-many-ways-to-use-ngclass

In your case, ng-class="{true: 'endeditem', false: ''}[item.ended]" should work.

Upvotes: 0

Related Questions