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? :}
You can use both class and ngClass as the first one gives you the opportunity to apply a class that you want to implement in all cases under any circumstances and the later to apply classes conditionally.
The NgClass and NgStyle directives are used to apply style to the HTML element conditionally. The NgClass allows you to apply whole class based on condition whereas NgStyle gives you more flexibility to set individual properties.
To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.
Definition and Usage. The ng-class directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With