javascript - 绑定(bind)到复杂对象的嵌套字段并在 AngularJs 中提供默认值？

Question

在 AngularJs 中绑定(bind)到复杂对象时提供默认值的最佳方式是什么？

例如:

var myObj = {
  bacon: {
    calories: 9000,
    expire_date: '...'
  },
  meatball: {
    calories: 5000,
  },
};

在 View 中:

<p>
  Bacon: {{myCtrl.myObj.bacon.calories}} kCal and expires on {{myCtrl.myObj.bacon.expire_date | date: 'medium'}}
</p>
<p>
  Meatball: {{myCtrl.myObj.meatball.calories}} kCal and expires on {{myCtrl.myObj.metaball.expire_date | date: 'medium'}}
</p>
<p>
  Egg: {{myCtrl.myObj.egg.calories}} kCal and expires on {{myCtrl.myObj.egg.expire_date | date: 'medium'}}
</p>

我无法保证培根、肉丸、鸡蛋及其嵌套字段的可用性(实际对象将从服务器请求)。

我应该如何在不向用户泄露 undefined/NaN 的情况下提供默认值？ (我已经看到了 {{ A || B }} 语法，但因为这是嵌套字段，所以我不确定它是否有效。)

Answer 1

Angular 真的很聪明!它选择不显示任何内容，而不是 NaN 或 undefined 或 null。您可以在看不到这些难看的字符串的情况下进入复杂对象的多个级别。

此外，您可以使用 ng-show="element_shown_if_expression_is_truthy" 指令或其补充 ng-hide="expression"

同时作为旁注，{{ A |如果 A 未定义，B }} 不使用 A 或 B。它实际上让 A 通过几乎可以做任何事情的过滤器 B。有许多默认过滤器，您可以制作自己的过滤器。查看the docs .

更新:在重新阅读您的问题后，您确实想要一个默认值。您可以使用 angular.extend(dest, src) 提供默认对象并使用您的服务器响应扩展它。查看the docs