内联中的多个语句 if

Posted 2023-02-23

【中文标题】内联中的多个语句 if

【英文标题】：multiple statements in an inline if

【发布时间】：2015-02-16 11:04:06

【问题描述】：

AngularJS 表达式的内联 if 语句中是否可以有多个语句？例如以下失败：

ng-change="someCondition() ? doA(); doB() : doC()"
ng-change="someCondition() ? doA(), doB() : doC()"

这可以按如下方式完成：

ng-change="someCondition() ? doA() : doC(); someCondition() ? doB() : ''"

但这很丑陋，调用 someCondition() 两次，并尖叫着要在控制器中完成。有什么方法可以让第一个示例工作？

【问题讨论】：

你想做什么？

你不应该在 dom 中做那么多逻辑。将其全部移至一个函数，然后调用该函数。保持 dom 中的 js 简单。

@DigitalFiz 我同意，但我觉得它很容易阅读（使用 ng-model="email" 的输入和 ng-model="emailOptOut" 的复选框） emailOptOut ？ emailCache = 电子邮件，电子邮件 = 未定义：电子邮件 = emailCache

【参考方案1】：

Angular 表达式仅限于简单表达式。解析器可能会拒绝任何更复杂的内容并抛出错误。在文档中阅读Angular Expressions vs. javascript Expressions 之间的差异。即：

无控制流语句：不能在 Angular 表达式中使用以下内容：条件、循环或异常。

无逗号和空运算符：您不能在 Angular 表达式中使用 , 或 void。

等等

您可以做的最好的事情是在控制器中创建一个函数，它将结合doA 和doB。它不仅会使 Angular 解析变得愉快，而且代码本身也会变得更清晰、更易于阅读。毕竟这是模板，还是简单点比较好。

【讨论】：

啊，不知道关于禁止使用逗号或空格（或关于 RegEx 或过滤器）的禁令。谢谢

【参考方案2】：

您的第一个示例不是有效的 javascript。 您的第二个示例包含,，它不能是任何角度表达式（不确定是否有效的javascript）。

根据您的用例，您有时可以使用&& 和|| 使其工作。

但是，模板中的代码仍然是代码。尝试使其可读。如果您无法使其可读，请将其提取到控制器中的函数中。

ng-change="onChange()"

【讨论】：

doA() 可以释放一个真值或假值，所以如果我要走这条路（这很聪明，我喜欢），我必须做 ng-change="someCondition( ) ? (doA() && 0) || doB() : doC()"

【参考方案3】：

请尝试以下场景:::

在多个语句中使用 ()

ng-change="someCondition ? (doA(), doB()) : doC()"

ng-change="someCondition ? (doA(), doB()) : doC()"

【参考方案4】：

我在 Angular 8 中使用 三元运算符

尝试过类似的操作

<input 
maxlength="memberProofForm.proofTypeId === 1?16:(memberProofForm.proofTypeId === 2?10:(memberProofForm.proofTypeId === 3?15:77))"
name="proofIdNumber" 
required 
type="text"
[(ngModel)]="memberProofForm.proofIdNumber">

它会像这样工作

if(memberProofForm.proofTypeId === 1)
    return 16;

else
    if(memberProofForm.proofTypeId === 2)
        return 10;
    else
        if(memberProofForm.proofTypeId === 3)
            return 15
        else
            return 77;