AngularJs：基于Model添加类

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

如果某事是真的，只是尝试应用一个类。关于http://docs.angularjs.org/api/ng.directive:ngClass的文档非常简短

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

如果1 === true，试图在li上添加一类收藏

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)

添加了jsFiddle以提高可读性，由于缺少依赖项（requireJs等），实际上没有工作

http://jsfiddle.net/HtJDy/

Can anyone point me in the right direction? :}

谁能指出我正确的方向？：}

1 个解决方案

#1

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

ngClass正在寻找要评估的角度表达式，“评估结果可以是表示空格分隔的类名，数组或类名映射到布尔值的字符串。”

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.

另请注意，布尔表达式不是JavaScript ......如果插入严格等于'==='，则会出现错误。

Hope that helps!

希望有所帮助！

#1