为了账号安全,请及时绑定邮箱和手机立即绑定

AngularJS模板中的三元运算符

/ 猿问

AngularJS模板中的三元运算符

萧十郎 2019-10-05 13:26:48

如何使用AngularJS(在模板中)进行三元运算?

最好在html属性(类和样式)中使用某些属性,而不是创建和调用控制器的函数。


查看完整描述

3 回答

?
红颜莎娜

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


查看完整回答
反对 2019-10-05
?
呼如林

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


查看完整回答
反对 2019-10-05
?
qq_遁去的一_1

到目前为止,我们所有人都发现版本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>


查看完整回答
反对 2019-10-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信