当 ng-repeat 在 angularjs 中发现 null 或 undefined 时设置默认值答案

【问题标题】：Set a default value when ng-repeat finds a null or undefined in angularjs当 ng-repeat 在 angularjs 中发现 null 或 undefined 时设置默认值
【发布时间】：2014-06-23 22:23:08
【问题描述】：

我对 AngularJS 还很陌生，我试图让我的 ng-repeat 在找到 null 时设置一个默认值。我尝试了在另一个 SO 页面上找到的这个解决方案，

<div class="col-sm-12" ng-repeat="data in dataNames">
    {{data.name || '<b>NONE</b>'}}
</div>

但是，当我添加 NONE 文本时，它只是将整行显示为纯文本，并且似乎 angular 没有对其进行评估。

更新

我现在尝试调用此过滤器并使用 $sce 来允许我返回 html。这是过滤器

require(["app", "angular"], function(app, angular) {
    app.filter("default", function ($sce) {
        return function (input, def) { 
            return $sce.trustAsHtml(!!input ? input : '<b>' + def + '</b>');
        };
    });
});

这就是我的称呼

{{ name | default: 'NONE' }}

它正在调用函数并正确评估，但它将 b 标记显示为纯文本而不是 html。我可能没有正确使用 $sce 吗？

【问题讨论】：

您不能在表达式中使用 html 标签。您必须创建一个函数并使用 $sce 来返回值

标签： javascript angularjs

【解决方案1】：

这相当于您的第一次尝试。 ng-if 仅在名称为 null 或未定义时生成 b 标记。

<div class="col-sm-12" ng-repeat="data in dataNames">
  {{data.name}}<b ng-if="!data.name">NONE</b>
</div>

这是一个演示：http://plnkr.co/edit/heRkCMvuqCHbyJhgpV4p?p=preview

【讨论】：

所以我想没有像我尝试过的那样简单的解决方案？
不，如果您尝试插入标签，则不会。删除b 标签，你的代码应该没问题。 angular 有很多很好的方法来有条件地添加样式，如果你需要它是粗体的话。
@Metropolis 这似乎是最简单的解决方案，并且 +1 使用 ng-class 将其加粗。
@Ronnie 是的，这看起来很简单，只是对我来说有点骇人听闻。但也许我会顺其自然。另一个问题是我将不得不多次重复使用它，因为我拥有的大部分数据都有空值。每次都必须这样做会很麻烦。
这不是hackish。这只是另一种方式。与其他所有方法相比，我更喜欢这种方法。最简单的海事组织

【解决方案2】：

在我的一个项目中，我定义了我的“默认”过滤器：

angular.module('my.filters', []).
    filter('default',[function ()
    {
        return function (input, def)
        {
            return !!input ? input : def;
        };
    }]);

将它包含到您的代码（文件和依赖项）中，您可以将其用作

{{ data.name | default:'NONE' }}

但是，如果要使用HTML作为值，则需要做更多的事情，例如

<div ng-bind-html="{{ data.name | default:'<b>NONE</b>' }}" ...></div>

您可能需要包含 angular-sanitize.js 模块才能使上述内容正常工作。另一种方法是使用 ng-style 或 ng-class 使文本变为粗体：

    <div ng-class="{'bold':data.name}" >{{ data.name | default:'NONE' }}</div>

【讨论】：

如果重复中有多个变量，我该怎么做？如<div ng-repeat="name in names">{{value}} - {{value}}</div>
我想知道是否可以像 Ronnie 上面那样使用 $sce 变量并将其添加到过滤器中。

【解决方案3】：

要使用 HTML 标记，您必须使用 $sce

jsbin

HTML：

<ul>
  <li ng-repeat="data in dataNames" ng-bind-html="formatName(data.name)"></li>
</ul>

控制器：

function TestController($scope, $sce)
{
  $scope.dataNames = [
    {
      foo: 'bar',
      name: 'Ronnie'
    },
    {
      foo: 'bar',
      name: 'Ted'
    },
    {
      foo: 'bar',
      name: null
    },
    {
      foo: 'bar',
      name: 'Jason'
    }
  ];

  $scope.formatName = function(name)
  {
    return $sce.trustAsHtml((name != null) ? name : '<b>none</b>');
  }
}

输出：

罗尼
特德
无
杰森

【讨论】：

我无法让它调用该函数。我也将 ngSanitize 模块添加到控制器中。我正在使用更新版本的 Angular。不确定这是否会有所不同。

【解决方案4】：

我最近遇到了同样的问题，最终使用了自定义过滤器。虽然这确实有一些前期工作的缺点，但该解决方案可以在类似情况下使用，并允许您替换不同的文本。

所以表达式看起来像这样：{{variable || nullFilter:'This value is null'}}

过滤器看起来类似于：

angular.module('appName').filter('nullFilter', function() {
return function(input, replacementText) {

  if (input == null) {
    return replacementText;
  }
  return input;
};

});

更多文档可以在这里找到：https://docs.angularjs.org/guide/filter

【讨论】：

不知道为什么这被否决了。它与此处的大多数其他答案几乎相同。

【解决方案5】：

作为https://stackoverflow.com/users/1245971/j-wittwer。显示了一种方法（使用 ng-if），但我们可以通过使用 angularjs 过滤器来实现这一点

{{data.name||'---Null'}} --> 通过这样写，我们可以在 ng-repeat 在 angularjs 中找到 null 或 undefined 时显示 '---Null'

我创建了同时使用 ng-if 和角度过滤器的 plunkr。

现在看你喜欢什么了。

【讨论】：