Question

我想写一个自定义过滤器，它依赖于原生的Angular过滤器。例如，我有一个可以为空的C＃日期，我将其传递给我在MVC中的视图，如果它有值，我想转换为'MM/dd/yyyy'，否则，显示None。

HTML

<div>{{ myNullableDate | nullableDate }}</div>

JS：

app.filter('nullableDate', function() {
  return function(dt) {
    if (dt) { // dt is something like "/Date(1430341152570)/"
      var jsonDate = new Date(parseInt(dt.substr(6)));
      return jsonDate | date:'MM/dd/yyyy'; // <-- This is where I want to use Angular's existing `date:'format'` filter
    }

    // date is null, so just return None in italics
    return "<i>None</i>";
  };
});

Answer 1

请参阅https://docs.angularjs.org/api/ng/filter/date

app.filter('nullableDate', function($filter) {
  return function(dt) {
    if (dt) { // dt is something like "/Date(1430341152570)/"
      return $filter('date')(dt, 'MM/dd/yyyy');
    }

    // date is null, so just return None in italics
    return "<i>None</i>";
  };
});

Answer 2

您可以尝试使用$ filter dependency调用现有过滤器：

$filter('existed_filter_name')(arg1,arg2);

请参阅相应的doc entry。

Answer 3

您可以使用$filter服务访问日期过滤器。

此外，如果您希望过滤器的结果显示为html，则应使用ng-bind-html指令，并使用$sce.trustAsHtml返回结果（否则您将看到字符串＆＃ 34;＆lt; \ i＆gt;无＆lt; / \ i＆gt;＆＃34;作为输出）：

.filter('nullableDate', function($filter, $sce) {
  return function(dt) {
    if (dt) { // dt is something like "/Date(1430341152570)/"
      var jsonDate = new Date(parseInt(dt.substr(6)));
      var format =  $filter('date')(jsonDate,'MM/dd/yyyy'); // <-- This is where I want to use Angular's existing `date:'format'` filter
      return $sce.trustAsHtml(format);
    }

    // date is null, so just return None in italics
    return $sce.trustAsHtml("<i>None</i>");
  };
});

在您的HTML中：

<div ng-bind-html="myNullableDate | nullableDate"></div>

如何编写回退到本机Angular过滤器的自定义过滤器

3 个答案: