AngularJs: Добавить класс на основе модели

Просто пытаюсь применить класс, если что-то истинно. Документация очень короткая в http://docs.angularjs.org/api/ng.directive:ngClass

Попытка добавить класс favorite в li, если 1 === true

Здесь мой 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
        }}                      
    ];

А вот моя разметка.

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

Добавлен jsFiddle для чтения, на самом деле не работает из-за отсутствия зависимостей (requireJs и т.д.)

http://jsfiddle.net/HtJDy/

Может ли кто-нибудь указать мне в правильном направлении?:}

Ответы

Ответ 1

ngClass ищет выражение angular для оценки: "Результатом оценки может быть строка, представляющая имена классов с разделителями пространства, массив или карта имен классов для логических значений".

Чтобы ваш пример работал, его немного противоположно тому, что вы думаете, где левая часть - это класс, который вы хотите добавить, а правая сторона - булево.

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

Карта объекта, подобная этому, позволяет вам иметь несколько классов, если вы так пожелаете:

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

Также обратите внимание, что логическое выражение не совсем похоже на JavaScript... если вы вставляете строковое равенство '===', вы получите сообщение об ошибке.

Надеюсь, что это поможет!