具有超过 2 个条件输出的 Angular ng 样式答案

【问题标题】：Angular ng-style with more than 2 conditional outputs具有超过 2 个条件输出的 Angular ng 样式
【发布时间】：2017-05-19 06:11:17
【问题描述】：

我的文本样式取决于 3 个条件：

条件1：颜色应该是绿色

条件2：颜色应该是蓝色

条件3：颜色应该是红色

因此，相同样式（颜色）有 3 个输出。

我可以想出以下表达式：

<p ng-style="condition1  ? { color:'green' } : { color: 'blue' }">

有没有办法改变上面的代码，使它可以适应所有 3 个条件和输出？

编辑：有一些变通方法可以使用控制器实现此目的；但我想知道这是否可以在 html 本身中完成

【问题讨论】：

控制器中的一个函数为你计算这个怎么样？
是的，有一些变通方法可以使用控制器来实现这一点；但我想知道这是否只能在 html 中完成..

标签： angularjs ng-style

【解决方案1】：

仅在任何条件为真时应用颜色，并使用?: 运算符检查其他条件为假值。如果不满足任何条件，则不要应用样式。

var app = angular.module("MyApp", []).controller("MyCtrl", function ($scope) {
    $scope.cond1 = false;
    $scope.cond2 = false;
    $scope.cond3 = true;
});

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

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
     <p ng-style="cond1  ? { color:'green' } : cond2 ? {color: 'blue'} : cond3 ? {color: 'red'} : {color: ''}">Hello World!</p>
  </div>

</body>

【讨论】：

【解决方案2】：

你可以这样做：

<p ng-style="condition1  ? { color:'green' } : condition2 ? { color:'blue' } : { color:'red' }">

【讨论】：