AngularJs: Thêm lớp dựa trên Mẫu

Question

Chỉ cố gắng áp dụng một lớp nếu có điều gì đó đúng. Các tài liệu là rất ngắn gọn về http://docs.angularjs.org/api/ng.directive:ngClass

Cố gắng thêm một lớp của favorite trên li nếu 1 === true

Dưới đây là Object Mock tôi

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

Và đây là đánh dấu của tôi.

 <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 cho dễ đọc, không thực sự làm việc do thiếu phụ thuộc (requireJs, vv)

http://jsfiddle.net/HtJDy/

bất cứ ai có thể chỉ cho tôi đi đúng hướng? :}

Answer 1

ngClass đang tìm kiếm một biểu thức góc để được đánh giá, với "Kết quả của việc đánh giá có thể là một chuỗi đại diện cho tên lớp phân cách không gian, mảng hoặc bản đồ tên lớp thành giá trị boolean".

Để ví dụ của bạn hoạt động, nó hơi trái ngược với những gì bạn nghĩ, trong đó phần bên trái là lớp bạn muốn thêm và bên phải nếu biểu thức boolean.

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

Bản đồ đối tượng như thế này cho phép bạn có nhiều lớp nếu bạn rất mong muốn:

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

Cũng lưu ý rằng biểu thức boolean không phải là khá Javascript ... nếu bạn cắm chặt chẽ bằng '===', bạn sẽ gặp lỗi.

Hy vọng điều đó sẽ hữu ích!