AngularJs: Add class based on Model

Question

Just trying to apply a class if something is true. The documentation is very brief on http://docs.angularjs.org/api/ng.directive:ngClass

Trying to add a class of favorite on the li if 1 === true

Here's my Mock Object

    $scope.restaurantListFromSearch = [
        {restaurantName: "Zocala",
        details: {
            image: "http://placehold.it/124x78",
            url: "#",
            cuisineType: ["Sandwiches", "American", "BBQ"],
            description: "Modern, healthy, awesome BBW",
            priceRange: "$",
            userFavorite: 0
        }},
        {restaurantName: "Subway",
        details: {
            image: "http://placehold.it/124x78",
            url: "#",
            cuisineType: ["Sandwiches", "American", "BBQ"],
            description: "Modern, healthy, awesome BBW",
            priceRange: "$",
            userFavorite: 1
        }},
        {restaurantName: "Hungry Howies",
        details: {
            image: "http://placehold.it/124x78",
            url: "#",
            cuisineType: ["Sandwiches", "American", "BBQ"],
            description: "Modern, healthy, awesome BBW",
            priceRange: "$",
            userFavorite: 0
        }}                      
    ];

And here's my markup.

        <ul>
            <li ng-repeat="restaurant in restaurantListFromSearch" ng-class="{restaurant.details.userFavorite === 1: favorite}">
                <img src="{{restaurant.details.image}}" alt="{{restaurant.restaurantName}}">

                <div class="details">
                    <a href="{{restaurant.details.url}}">{{restaurant.restaurantName}}</a>
                    <span class="cuisine-type">{{restaurant.details.cuisineType}}</span>
                    <p>{{restaurant.details.description}}</p>
                    <span class="price-rating">{{restaurant.details.priceRange}}</span>
                </div>

                <div class="clear"></div>   
            </li><!-- end restaurant result -->                                                                 
        </ul>

Added jsFiddle for readability, doesn't actually work due to missing dependencies (requireJs, etc)

http://jsfiddle.net/HtJDy/

Can anyone point me in the right direction? :}

Alex Klock · Accepted Answer · 2012-12-17 23:54:45Z

27

ngClass is looking for an angular expression to get evaluated, with "The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values."

For your example to work, its a little opposite of what you think, where the left portion is the class you want to add, and the right side if the boolean expression.

<li ng-repeat="restaurant in restaurantListFromSearch" ng-class="{ favorite : restaurant.details.userFavorite == 1}">

The object map like this allows you to have multiple classes if you so desired:

<li ng-repeat="restaurant in restaurantListFromSearch" ng-class="{ favorite : restaurant.details.userFavorite == 1, otherClass: otherBooleanExpression }">

Also note that the boolean expression isn't quite JavaScript... if you plug in the strict equals '===', you'll get an error.

Hope that helps!

answered Dec 17, 2012 at 23:54

Alex Klock

1,52612 silver badges14 bronze badges

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

2 Comments

Christopher Marshall Over a year ago

Awe, I was so close! This works perfectly. Thank you very much!

imsheth Over a year ago

for classes seperated by a "-", put the class names in quotes like 'classname' to avoid syntax errors

Collectives™ on Stack Overflow

AngularJs: Add class based on Model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related