【问题标题】:multiple statements in an inline if内联中的多个语句 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

标签: angularjs conditional-operator


【解决方案1】:

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

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

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

等等

您可以做的最好的事情是在控制器中创建一个函数,它将结合doAdoB。它不仅会使 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;
            }
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-07-07
      • 2013-02-15
      相关资源
      最近更新 更多