13

何かが真実である場合、クラスを適用しようとするだけです。ドキュメントはhttp://docs.angularjs.org/api/ng.directive:ngClassで非常に簡単です

ifにのクラスを追加しようとしfavoriteていますli1 === true

これが私のモックオブジェクトです

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

誰かが私を正しい方向に向けることができますか？：}

4

1 に答える 1

27

ngClassは、評価対象の角度式を探しています。「評価の結果は、スペースで区切られたクラス名を表す文字列、配列、またはクラス名のブール値へのマップになります。」

あなたの例が機能するためには、あなたが考えるものとは少し反対です。左側は追加したいクラスであり、右側はブール式の場合です。

<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ではないことに注意してください...厳密に等しい'==='をプラグインすると、エラーが発生します。

お役に立てば幸いです。

于 2012-12-17T23:54:45.190 に答える