Question

我的文字是依赖于3个条件：

条件1：颜色应为绿色

条件2：颜色应为蓝色

condition3：颜色应为红色

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

我可以想出以下表达式：

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

有没有办法更改上面的代码，以便它可以容纳所有3个条件和输出？

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

Answer 1

如果任何条件为真，则仅应用颜色，并使用?:运算符检查其他条件是否为false值。如果没有条件，则不要应用样式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以这样做：

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

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

2 个答案: