在AngularJS模板中的三元运算符

18 浏览
0 Comments

在AngularJS模板中的三元运算符

如何在AngularJS中使用三元运算符（在模板中）？\n在html属性（类和样式）中使用一些而不是创建和调用控制器的函数将是很好的。

0

3 答案

0 Comments

AngularJS模板中的三元操作符（Ternary Operator）的问题是由于在文本中使用了三元操作符而引起的。解决方法是使用条件判断表达式来替代三元操作符。

在AngularJS模板中，我们可以使用双大括号（{{}}）来插入变量和表达式。在上述示例中，我们使用了三元操作符来根据用户类型（userType）的值判断显示的文本是“Edit”还是“Show”。

然而，三元操作符在AngularJS模板中的使用是有限制的。它只能用于计算实际的变量值，而不能用于控制模板的结构和逻辑。这是因为AngularJS模板引擎是基于数据绑定的，它需要跟踪变量的变化并更新DOM。

为了解决这个问题，我们可以使用条件判断表达式来替代三元操作符。条件判断表达式可以根据条件的真假返回不同的值，类似于三元操作符。以下是使用条件判断表达式重写的示例：

<span>
  {{(userType == 'admin') && 'Edit' || 'Show'}}
</span>

在这个示例中，我们使用了条件判断表达式来判断userType是否等于'admin'。如果条件为真，返回'Edit'，否则返回'Show'。这样就实现了与三元操作符相同的效果。

总结起来，AngularJS模板中三元操作符的问题是由于其在控制模板的结构和逻辑时的限制。解决方法是使用条件判断表达式来替代三元操作符。通过使用条件判断表达式，我们可以根据条件的真假返回不同的值，实现相同的效果。

0
0 Comments

AngularJS模板中的三元运算符问题是如何出现的？为了解决这个问题，我们需要首先了解AngularJS 1.1.5版本之前的情况。

在AngularJS 1.1.5之前，AngularJS中的三元运算符的形式是：

((条件) && (条件成立时的结果) || (条件不成立时的结果))

下面是一个示例：

或者：

 
  • 
 <<

    • 这种写法并不直观，让人感到困惑。为什么要这样实现呢？

    实际上，AngularJS并没有实现三元运算符，这只是使用二元运算符的一种方式。

    AngularJS推崇可测试性，模板不应包含任何逻辑。模板中的三元运算符应该重构为对控制器的函数调用，以便更好地进行测试。

    在上述示例中，是否应该使用ng-style和ng-class？（我不确定它们需要在什么时候使用。）

    如果你想使用ng-style，那么表达式需要计算为一个对象，其键是CSS样式名称，值是CSS值。例如，ng-style="{color: $location.path()=='/page2' && '#fff' || '#000'}"。我认为这样写更清晰，因为更容易看出你正在设置'color'。

    你能详细解释一下吗？我想根据一个布尔属性打印CSS类，我应该如何将其重构为控制器中的函数？（我是个新手，我知道。）

    你应该使用ngClass指令（或ngClassEven和ngClassOdd）。然后将选择CSS类的所有逻辑放在控制器中。这样更容易进行自动化测试。

    但是将类名放在模型中是一个好主意吗？它们属于视图，模型不应该知道视图使用了哪些CSS类。最好的办法是，如果我可以使用模型中的布尔属性，像ng-class="someboolean: 'myCssClass'"这样。

    我说的是将它放在控制器中，而不是模型中。这应该不是一个问题。然而，文档中说：“评估的结果可以是表示空格分隔类名的字符串，数组或类名与布尔值的映射”。这意味着你可以使用"{ cssclass: someBoolCheck() }"作为表达式，即你将CSS类放在视图中，将逻辑放在控制器中。参考这个 jsFiddle 的示例。

    0
    0 Comments

    AngularJS模板中的三元运算符问题的出现原因是AngularJS早期版本不支持直接使用三元运算符。解决方法是使用一个条件表达式来表示三元运算符的功能。在AngularJS 1.1.5之前的版本中，有两种选择：1) 使用(condition && result_if_true || !condition && result_if_false)的形式；2) 使用{true: 'result_if_true', false: 'result_if_false'}[condition]的形式。

    第二种方法创建了一个具有两个属性的对象。使用数组语法来选择具有名称true或false的属性，并返回相关的值。

    例如，在ng-repeat循环的第一个元素中，$first被设置为true，所以上面的代码将只对循环的第一次应用class 'myClass1'和'myClass2'。

    使用ng-class可以更简单地实现相同的功能。ng-class接受一个表达式，该表达式必须计算为以下之一：

    1) 由空格分隔的类名的字符串

    2) 由类名组成的数组

    3) 类名到布尔值的映射/对象

    ng-style接受一个表达式，该表达式必须计算为CSS样式名称到CSS值的映射/对象。

    以上是关于AngularJS模板中三元运算符问题的原因和解决方法的整理。

    0