如何混合使用 ngClass 映射语法和布尔运算符答案

【问题标题】：How to mix ngClass Map Syntax and Boolean Operators如何混合使用 ngClass 映射语法和布尔运算符
【发布时间】：2015-06-29 11:28:46
【问题描述】：

如何将ngClass 映射语法与&& 和! 布尔运算符一起使用？

<div class="tbTileContent"
    ng-class=  
    "{'highlight': ((obj.Count == 1 &&  
         setActionType != 1 && setActionType != 20 )},[obj.BackgroundColor,obj.ColumnColor]">

不起作用。这可能是其他方式吗？

【问题讨论】：

也许将你的 div 复制到一个角度页面，看看会发生什么？
什么都没有发生，它不工作
您的代码在语法上看起来不正确，有 2 个 (( 但有 1 个 )
How to get evaluated attributes inside a custom directive的可能重复

标签： angularjs debugging ng-class boolean-operations

【解决方案1】：

参考rootScope 使用相等检查来简化调试，并使用开发者工具检查 CSS 特异性：

.foo { color: red; }
.bar { color: blue; }
.baz { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script>
  function bar($rootScope)
    {
    $rootScope.conditionA = true;
    $rootScope.conditionB = function() { return true; };
    }
  
  angular.module('foo',[]);
  angular.module('foo').run(bar);
</script>
<div ng-app="foo">
  <div class="existing" ng-class="{baz: conditionA && conditionB(), foo: conditionA, bar: conditionB()}">
    Hi
  </div>
</div>

Run 块是 Angular 中最接近 main 方法的东西。运行块是需要运行以启动应用程序的代码。它在所有服务都配置好并创建注入器后执行。运行块通常包含难以进行单元测试的代码，因此应在独立模块中声明，以便在单元测试中可以忽略它们。

参考文献

【讨论】：