您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

AngularJS模板中的三元运算符

AngularJS模板中的三元运算符

:Angular1.1.5添加一个三元运算符,因此现在我们可以简单地编写

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

如果您使用的是较早版本的Angular,则有两个选择:

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

例如,

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

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

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

上面给出了1)的示例。这是3的示例,我认为它读起来更好:

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

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

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

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
其他 2022/1/1 18:23:51 有256人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶