AngularJS 1.6模板中能否用逻辑OR绑定多个变量取值？

当然可以这么写！在AngularJS 1.6的模板表达式里，||运算符完全支持这种“取第一个真值”的逻辑，刚好能满足你从foo、bar、baz三个变量中拿到第一个可用值的需求。

具体怎么工作？ #

AngularJS会按照从左到右的顺序逐个检查变量：

• 只要遇到第一个真值（也就是不是undefined、null、false、0、空字符串''这类假值的变量），就会把它渲染到<span>里
• 如果前面的变量都是假值，就会继续检查下一个，直到找到第一个符合要求的
• 如果三个变量全是假值，<span>会渲染成空字符串（AngularJS默认会把null/undefined转为空）

举几个实际例子：

• 若foo = '前端开发'，不管bar和baz是什么，最终显示前端开发
• 若foo是undefined，bar = 2024，则显示2024
• 若foo、bar都是null，baz = 'AngularJS'，则显示AngularJS

注意特殊场景 #

如果你的“可用值”需要包含0、false或者空字符串这类假值（比如0是有效的业务数值），那||就会跳过它们，这时候就得换更精确的写法：

方式1：嵌套三元表达式

<span>{{ foo !== undefined ? foo : (bar !== undefined ? bar : baz) }}</span>

这种写法只会排除undefined，保留null、0、''等值。

方式2：自定义过滤器（更优雅）

先在你的AngularJS应用里定义一个过滤器：

angular.module('yourApp', [])
.filter('firstAvailable', function() {
  return function() {
    // 遍历传入的所有变量，返回第一个非undefined、非null的值
    for (let i = 0; i < arguments.length; i++) {
      const val = arguments[i];
      if (val !== undefined && val !== null) {
        return val;
      }
    }
    return ''; // 所有变量都无效时返回空
  };
});

然后在模板里这样用：

<span>{{ foo | firstAvailable:bar:baz }}</span>

总结 #

• 如果你的“可用值”是指真值（排除假值），直接用{{ foo || bar || baz }}就够了，简单高效
• 如果需要更精细的判断（比如保留某些假值），用嵌套三元表达式或者自定义过滤器更合适

内容的提问来源于stack exchange，提问作者luthien