Angular 具有 2 个以上条件输出的 ng 样式

Question

我的文字麦粒肿取决于 3 个条件：

条件 1：颜色应为绿色

条件2：颜色应该是蓝色

条件3：颜色应该是红色

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

我可以想出以下表达式：

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

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

EDIT：有使用控制器实现此目的的解决方法；但我想知道这是否可以在 html 本身

中完成

Answer 1

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

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>

Answer 2

你可以简单地这样做:

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

Angular 具有 2 个以上条件输出的 ng 样式

Angular ng-style with more than 2 conditional outputs

angularjs

ng-style