2012-12-17 6 views
13

무언가 사실이라면 클래스를 적용하려고합니다. 문서는 여기 내 모의 객체AngularJs : 모델을 기반으로 클래스 추가

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

입니다 그리고 여기 내 마크 업 년대 li1 === true 경우

favorite의 클래스를 추가하려고 http://docs.angularjs.org/api/ng.directive:ngClass

매우 간단한 것입니다. 가독성

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

사람이 올바른 방향으로 날 지점 수를 누락 작동하지 않는 이유는 무엇입니까? :}

답변

27

ngClass는 "평가 결과는 공백으로 구분 된 클래스 이름, 배열 또는 부울 값에 대한 클래스 이름의지도를 나타내는 문자열이 될 수 있습니다."와 함께 평가되는 각도 표현식을 찾고 있습니다.

예를 들어, 왼쪽에서 부분은 당신이 추가하고자하는 클래스이고, 오른쪽은 부울 표현식이면 오른쪽입니다. 당신이 엄격한에 연결하면

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

또한 ... 부울 표현이 매우 자바 스크립트가 아닙니다 :

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

이 같은 개체의지도는 원한다면 여러 수업을 할 수 있습니다 '==='와 같으면 오류가 발생합니다.

희망 하시겠습니까?

+0

경외, 나는 너무 가까웠다! 이것은 완벽하게 작동합니다. 고마워요! –

+2

"-"로 구분 된 클래스의 경우 구문 오류를 피하기 위해 클래스 이름을 'classname'과 같은 따옴표로 묶습니다. – imsheth

관련 문제