Question

我已将条件写为

ng-class="{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'}[favOffers[offer.id]]"

，即如果favOffers [offer.id]有一个值，则在true语句中应用该类，否则在false语句中应用该类。

但它不起作用。 favOffers在我的控制器中定义。

Answer 1

您可以在案例中使用三元条件

<div ng-class="favOffers[offer.id] ? 'ion-ios-heart': 'ion-ios-heart-outline'"></div>

Answer 2

这应该有效：

<div ng-class="{'ion-ios-heart' : favOffers[offer.id], 'ion-ios-heart-outline' : !favOffers[offer.id] }>
</div>

Answer 3

确保; WITH CTE_Totals AS ( SELECT DISTINCT CASE WHEN LoginName = Letter1SentBy THEN LoginName WHEN LoginName = Letter2SentBy THEN LoginName END AS Logonuser, sum(CASE WHEN Letter1SentDate = DATEADD(WEEK, DATEDIFF(DAY, 0, getdate()) / 7, 0) THEN 1 ELSE 0 END) AS MondayL1, SUM(CASE WHEN Letter2SentDate = DATEADD(WEEK, DATEDIFF(DAY, 0, getdate()) / 7, 0) THEN 1 ELSE 0 END) AS MondayL2 FROM MainCase WITH ( NOLOCK ) LEFT OUTER JOIN Left OUTER JOIN letters_sent WITH (NOLOCK) ON MainCase.casekey = letters_sent.casekey users WITH (NOLOCK) ON Maincase.userCaseNo = users.userCaseNo GROUP BY LoginName, Letter1SentBy, Letter2SentBy ) SELECT DISTINCT Logonuser, sum(MondayL1 + MondayL2) AS total FROM CTE_Totals GROUP BY Logonuser, CTE_Totals.MondaytL1, CTE_Totals.MondayL2 ORDER BY Logonuser ASC已定义并且不会导致错误，您可以使用double favOffers[offer.id]来设置未定义的布尔值，如!!。

例如，在下面的代码片段中没有定义ng-class="{true: 'ion-ios-heart', false: 'ion-ios-heart-outline'}[!!favOffers[offer.id]]" memeber，通过执行isTrue，如果未定义它将始终返回false，即使它未定义也会找到正确的值。

!!isTrue

angular.module('app', [])
  .controller('myController', function ($scope) {
    //$scope.isTrue = false;
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['app']);
});

.bg-green{
  background: green;
}

.bg-red{
  background: red;  
}

.bg-green,
.bg-red{
  padding: 2px 4px;
  margin: 2px 0;
  color: white;
}

Answer 4

你可以直接尝试使用对象值....这里假设ion-ios-heart和ion-ios-heart-outline作为在某处定义的两个类。

ng-class="{'ion-ios-heart': offer.id!=='null', 'ion-ios-heart-outline': offer.id=='null'}"

尝试根据您的要求配置对象值。检查此plunker一次

Answer 5

为了代码的清晰度和可读性，为什么不使用控制器中的方法进行此检查？

例如

   <div ng-class="{'className':isTestCondition(), 'className1':!isTestCondition()}"</div>

然后在你的控制器中：

  $scope.testCondition = function() {}

有多种方法可以检查数组是否包含对象。您可以在this回答中找到不同的方式。

如何在ng-class中编写条件语句？

5 个答案: