AngularJs: Dodaj klasę na podstawie modelu

Question

Po prostu próbujesz zastosować klasę, jeśli coś jest prawdą. Dokumentacja jest bardzo krótki na http://docs.angularjs.org/api/ng.directive:ngClass

Próbując dodać klasę favorite na li jeżeli 1 === true

Oto mój atrapa obiektu

$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 
     }}      
    ]; 

A oto mój znaczników.

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

Dodany jsFiddle dla czytelności, w rzeczywistości nie działa z powodu brakujących zależnościach (requireJs, itp)

http://jsfiddle.net/HtJDy/

Czy ktoś może wskazać mi w dobrym kierunku? :}

Answer 1

ngClass szuka wyrażenia kątowego, aby uzyskać ocenę, z "Rezultatem oceny może być ciąg reprezentujący nazwy klas rozdzielonych spacjami, tablica lub mapa nazw klas do wartości logicznych."

Na przykład do pracy, jest to trochę przeciwne do tego, co myślisz, gdzie lewa część jest klasą, którą chcesz dodać, a prawą stroną, jeśli wyrażenie boolowskie.

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

Mapa obiekt jak ten pozwala mieć wiele klas, jeśli jest to pożądane:

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

pamiętać, że wyrażenie logiczne nie jest całkiem JavaScript również ... jeśli podłączyć ścisłe równa się "===", dostaniesz błąd.

Nadzieję, że pomaga!