ng-repeat 不同风格的活动类

Question

我正在使用 ng-repeat 创建一个报价列表。根据每个报价状态，它们应该具有不同的颜色，并且在激活时，它也应该具有不同的特定状态。活动逻辑运行良好，但现在发生的情况是它们都呈现为真，所以它们都是相同的颜色。如果您对此有任何其他想法，请随意。

这是我在渲染后检查时看到的：

 ng-class="{'offer card-active-false card row text-left': currentOfferId === offer.id, 'offer card card-false row text-left': currentOfferId !== offer.id}" class="offer card card-true row text-left"

这是我在 HTML 上的内容：

<div ng-repeat="offer in $parent.offersList track by $index">
  <button ng-click="$ctrl.setCurrentOffer(offer)">
    <div ng-if="" ng-class="{'offer card-active-{{offer.status}} card row text-left': currentOfferId === offer.id, 'offer card card-{{offer.status}} row text-left': currentOfferId !== offer.id}">
    //then I have my divs
    </div>
  </button>
</div>

CCS：

                .card-true {
                    background-color: #00FF44;
                }

                .card-false {
                    background-color: #C4C4CC;
                }

                .card- {
                  background-color: yellow;
                }

                .card-active-true {
                    background-color: #fff!important;
                    border-color: #00FF44;
                }

                .card-active-false {
                    background-color: #fff!important;
                    border-color: gray;
                }

                .card-active- {
                    background-color: #fff!important;
                    border-color: yellow;
                }

谢谢！

Answer 1

将始终需要存在的类放入普通的class 属性中。

然后简化您需要的类并将它们分开，这样您就不必过度复杂化逻辑。我的建议可能不正确，但应该是这样的：

• card-status-... - 由 offer.status 驱动
• card-active - 由 `currentOfferId === offer.id' 驱动

然后您可以轻松地将逻辑放入ngClass，它允许您指定一个数组，其成员可以是表示类名的字符串或对象，其键是类名，其布尔值指示是否应包含该类。像这样：

<div class="offer card row text-left" 
    ng-class="[
        'card-status-' + offer.status,
        {'card-active' : currentOfferId === offer.id}
    ]">

现在，您可以在 CSS 中通过组合选择器来设置这些类：

.card {
    background-color: yellow;
}

.card-status-true {
    background-color: #00FF44;
}

.card-status-false {
    background-color: #C4C4CC;
}

.card.card-active {
    background-color: #fff !important;
    border-color: yellow;
}

.card.card-active.card-status-true {
    background-color: #fff !important;
    border-color: #00FF44;
}

.card.card-active.card-status-false {
    background-color: #fff !important;
    border-color: gray;
}

Answer 2

这是我的解决方案，删除复杂的逻辑，显然在ng-class内部没有正确绑定，只会混淆，不值得花时间。

注意：我使用了$scope 变量而不是this，请使用我分享的 JSFiddle 的 GIST 并尝试构建您的代码，我不确定颜色要求，请检查并告诉我是否该代码解决了您的问题。

JSFiddle Demo

代码：

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
    $scope.offersList = [{id:1, status: false}, {id:2, status: false}, {id:3, status: false}, {id:4, status: false}];
    $scope.currentOfferId = 0;
  $scope.setCurrentOffer=function(index){
    $scope.currentOfferId = $scope.offersList[index].id;
    $scope.offersList[index].status = !$scope.offersList[index].status;
  }
  $scope.filterClass = function(offer){
    var bool = offer.status ? 'true' : 'false';
    if($scope.currentOfferId === offer.id){
        return 'offer card-active-'+bool;
      }else{
        return 'offer card card-'+bool;
      }
    }
});    

Answer 3

尚不清楚您希望将哪些类应用于哪种情况。您需要将每个单独的条件交给 ng-class 一个数组，这可能是您问题的根源。 您也可以为此使用三元（角度 v.1.1.4+ 引入了对三元运算符的支持），这使事情看起来更整洁：

<div ng-class="[offer.id ===currentOfferId ? 'card-active-true' : 'card-active-false', 
offer.status ? 'card-active-true' : 'card-false' ]"
class="offer card row text-left" >