AngularJS模板中的三元运算符

如何使用AngularJS(在模板中)实现三元?

使用一些html属性(类和样式)而不是创建和调用控制器的函数会很好。

当前回答

对于angular模板中的文本(userType是$scope的属性，比如$scope.userType):

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

2015-10-14 11:46:49

其他回答

这个答案早于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>

2013-01-16 12:21:59

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

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

如果你使用的是早期版本的Angular，你有两个选择:

(条件&& result_if_true || !条件&& result_if_false) {true: 'result_if_true'， false: 'result_if_false'}[条件]

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

2012-08-28 00:59:06

  <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

2016-04-02 16:43:07

如果有人还像我一样在遗留代码上工作，你也可以在ng风格中使用三元操作符来实现这一点，如下所示:

<li ng-style="{'color': connected ? '#008000' : '#808080'}"></li>

2022-02-18 19:48:19

对于angular模板中的文本(userType是$scope的属性，比如$scope.userType):

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

2015-10-14 11:46:49

AngularJS模板中的三元运算符

推荐文章

最新文章

标签