Angularjs模板默认值如果绑定为null/undefined（使用过滤器）
Angularjs模板默认值如果绑定为null/undefined（使用过滤器）
我有一个模板绑定，显示一个名为\'date\'的模型属性，它是一个日期，使用Angular的日期过滤器。\n
{{gallery.date | date:'mediumDate'}}
\n到目前为止还好。然而，目前如果日期字段没有值，绑定就不显示任何内容。然而，如果没有日期，我希望它显示字符串\'Various\'。\n我可以使用二元运算符获得基本逻辑：\n
{{gallery.date || 'Various'}}
\n然而，我无法与日期过滤器一起使用它：\n
{{gallery.date | date:'mediumDate' || "Various"}}
\n我如何在日期过滤器旁边使用二元运算符？
问题的出现原因是在AngularJS模板中，如果绑定的值为null或undefined，则默认情况下不会显示任何内容。解决方法是使用过滤器来设置默认值。
解决方法示例代码如下：
{{gallery.date?(gallery.date | date:'mediumDate'):"Various" }}
这里使用了三元运算符来判断绑定的值是否存在，如果存在则使用过滤器将日期格式化为'mediumDate'，否则显示默认值"Various"。
Pedr在Stack Overflow上给出了类似的解决方案，但是使用的方法更加隐晦。这种方法更加直观，特别是对于有编程背景的人来说。使用三元运算符可以简化if-else语句。
另外，这种解决方法可能比被接受的答案更高效，因为它不会在值为false时调用过滤器。这种方法在处理更深层次的层级结构时也更有用。
AngularJS模板默认值if绑定为空/未定义（带过滤器）的问题出现的原因是当绑定的值为空或未定义时，模板直接显示空白，而不是显示一个默认值。为了解决这个问题，可以使用自定义过滤器来判断绑定的值是否为空或未定义，并返回一个默认值。
上述代码中定义了一个名为"ifEmpty"的过滤器。它接受两个参数，第一个参数是要过滤的值，第二个参数是默认值。过滤器首先判断输入是否为空、未定义或为空字符串，如果是，则返回默认值，否则返回输入值。
可以在模板中使用这个过滤器，语法为{{value | ifEmpty:defaultValue}}。例如，可以将一个价格变量aPrice绑定到一个span元素，并使用货币过滤器来格式化显示，如果aPrice为空或未定义，则显示默认值"N/A"。同样的，可以将一个数字变量aNum绑定到另一个span元素，并使用number过滤器来格式化显示，如果aNum为空或未定义，则显示默认值0。
作者在原有的过滤器基础上进行了扩展和复制。通过在现有过滤器中嵌套一个if语句，他创建了一个名为"defString"的过滤器。这个过滤器判断默认值是否为空或未定义，如果是，则返回字符串"default"，以提供一个更高级别的默认值。这样，可以将一个字符串变量expected.string绑定到一个span元素，并使用defString过滤器来显示，默认值为"default"。
通过自定义过滤器，我们可以实现在AngularJS模板中设置默认值的功能，以处理绑定值为空或未定义的情况。这样可以提升用户体验，并简化代码逻辑。
