AngularJS – 模板中的三元组

前端之家收集整理的这篇文章主要介绍了AngularJS – 模板中的三元组前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

更新:Angular 1.1.5添加了一个ternary operator,所以现在我们可以简单地写

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

猜你在找的Angularjs相关文章