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

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

推荐答案

Update:Angular 1.1.5增加了ternary operator,所以现在我们可以简单地写

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

如果您使用的是Angular的早期版本,则有两种 Select :

  1. (condition && result_if_true || !condition && result_if_false)
  2. {true: 'result_if_true', false: 'result_if_false'}[condition]

项目2.上面创建了一个具有两个属性的对象.数组语法用于 Select 名为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类接受一个表达式,该表达式必须计算为以下值之一:

  1. 由空格分隔的类名组成的字符串
  2. 类名数组
  3. 类名到布尔值的映射/对象.

上面给出了1)的示例.这里有一个3的例子,我认为它读起来要好得多:

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

第一次通过ng重复循环,添加了类myClass.第三次到($index从0开始),将添加另一个类.

ng-style takes an expression that must evaluate to a map/object of CSS style names to CSS values. 例如.,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Javascript相关问答推荐

CSS背景过滤器忽略转换持续时间(ReactJS)

使脚本兼容于其他YouTube URL格式

如何制作删除按钮以从列表中删除该项目所属的项目?

如何按预期聚合SON数据?

React存档iframe点击行为

每次子路由重定向都会调用父加载器函数

为什么我的includes声明需要整个字符串?

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

Javascript,部分重排序数组

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

嵌套异步JavaScript(微任务和macrotask队列)

屏幕右侧屏障上的产卵点""

不能将空字符串传递给cy.containes()

material UI按钮组样式props 不反射

覆盖加载器页面避免对页面上的元素进行操作

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

向数组中的对象添加键而不改变原始变量

当标题被点击时,如何使内容出现在另一个div上?

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

构建器模式与参数对象输入