AngularJS模板中的三元运算符

239

如何使用AngularJS（在模板中）进行三元运算？

最好在html属性中使用一些属性（类和样式），而不是创建和调用控制器的函数。

— 克卡多尔
source

374

更新：Angular 1.1.5添加了一个三元运算符，因此现在我们可以简单地编写

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

如果使用的是较早版本的Angular，则有两个选择：

(condition && result_if_true || !condition && result_if_false)
{true: 'result_if_true', false: 'result_if_false'}[condition]

上面的项目2创建具有两个属性的对象。数组语法用于选择名称为true的属性或名称为false的属性，并返回关联的值。

例如，

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$ first在第一个元素的ng-repeat中设置为true，因此上面仅在循环中第一次应用类'myClass1'和'myClass2'。

使用ng-class时，有一种更简单的方法：ng-class采用一个表达式，该表达式的值必须为以下之一：

一串用空格分隔的类名
类名数组
类名到布尔值的映射/对象。

上面给出了1）的示例。这是3的示例，我认为它读起来更好：

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

第一次通过ng-repeat循环，添加了类myClass。第三次（$ index从0开始），添加了anotherClass类。

ng-style采用一个表达式，该表达式必须计算为CSS样式名称与CSS值的映射/对象。例如，

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

— 马克·拉科克
source

6

如果可以的话，我会再次支持您更新问题！

— 纳雷茨

2

我会处理的，@ Narretz。

— 伊恩·亨特

1

在对象键访问示例中，您可以跳过“ false”键，因为它始终是空字符串。

— 0xc0de 2013年

警告词，1.1.5当前不稳定。

— 亚当·格兰特

如果在更新模型时条件发生了变化该怎么办？我想ng-style更新，但似乎仅在第一次渲染该元素时进行评估。（此处是角形菜鸟）

— 哈特利·布罗迪

86

更新： Angular 1.1.5添加了三元运算符，此答案仅对1.1.5之前的版本正确。对于1.1.5及更高版本，请参阅当前接受的答案。

在Angular 1.1.5之前：

angularjs中的三元形式为：

((condition) && (answer if true) || (answer if false))

一个例子是：

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

要么：

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

— 克卡多尔
source

1

奇怪的。这不是很直观。我不知道为什么要这样实施。

— Ben Lesh 2012年

4

三元数从未被限制，但这只是使用二进制运算符的工作方式。

— 安德鲁·乔斯林

18

@ blesh，AngularJS促进了可测试性。模板不应包含任何逻辑。模板中的三元运算符应重构为对控制器的函数调用，以实现更好的可测试性。

— Marcello Nuccio 2012年

1

@ arg20应该使用ngClass指令（或ngClassEven和ngClassOdd）。然后将所有用于选择css类的逻辑放入控制器中。这更容易自动测试。

— Marcello Nuccio

1

我说@ arg20放在控制器中，而不是模型中。这应该不是问题。但是，文档说：“求值结果可以是一个字符串，代表用空格分隔的类名，数组或类名到布尔值的映射”。这意味着您可以将“ {cssclass：someBoolCheck（）}”用作表达式，即，将css类放在视图中，并将逻辑放在控制器中。看这个jsFiddle的例子。

— Marcello Nuccio

23

对于角度模板中的文本（userType是$ scope的属性，例如$ scope.userType）：

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

— 伊克罗姆
source

11

到目前为止，我们所有人都发现版本1.1.5在$parse函数中带有适当的三进制，因此仅使用此答案作为过滤器示例：

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

然后将其用作

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

— 一月
source

2

我为三元运算符遇到了这个问题，但最后我使用了一个过滤器，感觉真的很棒……= D

— slacktracer

10

它是：1.1.5中已将三元运算符添加到角度解析器中！查看变更日志

这是一个小提琴，显示了ng-class指令中使用的新三元运算符。

ng-class="boolForTernary ? 'blue' : 'red'"

— 狮子根
source

10

虽然您可以condition && if-true-part || if-false-part在较旧的angular版本中使用-syntax，但condition ? true-part : false-part在Angular 1.1.5及更高版本中可以使用常规的三元运算符。

— 亚历山大·布洛姆斯科尔德（AleksanderBlomskøld）
source

0

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

按钮切换并更改按钮的标题和显示/隐藏div面板。见Plunkr

— 扎希德·拉赫曼（Zahid Rahman）
source