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

放置总是需要存在于普通return resp.json() as Light[];属性中的类。

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

class - 由card-status-...
offer.status - 由“currentOfferId === offer.id”

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

ngClass

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

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

Answer 2

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

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

JSFiddle Demo

<强> CODE：

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

ng-repeat活动类具有不同的风格

3 个答案: