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)
Can anyone point me in the right direction? :}
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!