Question

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

例如：

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

在视图中：

<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.它实际上通过过滤器B放置A，它几乎可以做任何事情。有许多默认过滤器，您可以自己制作。查看the docs。

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

Answer 2

这里最简单的解决方案是

{{ myCtrl.myObj.egg.calories || default_value }}

每个变量

。

话虽这么说，Joel的angular.extend解决方案将是最有效的 angulary 方式（即不将数据放入HTML中）。

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

2 个答案: