AngularJS模板中的三元运算符

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

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

当前回答

更新: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>

or:

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

2012-08-17 15:20:25

其他回答

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

2013-05-19 09:20:11

更新: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>

or:

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

2012-08-17 15:20:25

在这里:三元运算符在1.1.5中被添加到角解析器!参见更新日志

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

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

2013-05-23 08:19:34

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

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

2022-02-18 19:48:19

  <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

AngularJS模板中的三元运算符

推荐文章

最新文章

标签