如何使用 AngularJS 过滤器捕获 null、未定义、空白值答案

【问题标题】：How to catch null, undefined, blank values with AngularJS filter如何使用 AngularJS 过滤器捕获 null、未定义、空白值
【发布时间】：2015-05-07 17:02:04
【问题描述】：

我正在尝试编写一个用于网格的过滤器，该过滤器将捕获所有 null、未定义、空白字符串或其他类似值并显示破折号“-”。到目前为止，我已经编写了以下内容，但它没有捕获空值，我想知道它是否可以更简洁并且可能进行重构以避免三层嵌套的 if/else 语句。需要检查百分比值是否大于 0 和小于 1。此外，负数和 0 应按原样返回。谢谢！

angular.module('AdverseEventsExplorer.main').filter('emptyCellFilter', function ($filter) {
    return function (input, cellFilter, args1, args2) {    

        if (cellFilter == undefined) {
            return (angular.isNumber(input) || angular.isDefined(input) && input.length > 0) ? input : '-';
        } else {
            if (cellFilter.match(/pctg|percent|pctgFilter|incidence/ig)) {
                return (input > 0 && input < 1.0000000) ? $filter(cellFilter)(input, args1, args2) : '-';
            } else {
                return (angular.isNumber(input) || angular.isDefined(input) && input.length > 0) ? input : '-';
            }
        }

    };
});

2.0 版考虑到@tymeJV 的评论：

angular.module('AdverseEventsExplorer.main').filter('emptyCellFilter', function ($filter) {
    return function (input, cellFilter, args1, args2) {

        if (!cellFilter) {
            return (angular.isNumber(input) || (input)) ? input : '-';
        } else {
            if (cellFilter.match(/pctg|percent|pctgFilter|incidence/ig)) {
                return (input > 0 && input < 1.0000000) ? $filter(cellFilter)(input, args1, args2) : '-';
            } else {
                return (angular.isNumber(input) || (input)) ? $filter(cellFilter)(input, args1, args2) : '-';
            }
        }

    };
});

【问题讨论】：

null, undefined, 0, "" - 所有虚假值都可以只做if (value)检查。

标签： javascript angularjs if-statement angularjs-filter

【解决方案1】：

每当您遇到一个过于复杂而无法重构的函数时，请尝试将一些较小的语句提取为简洁命名的变量。它使我们的大脑更容易跟踪函数的需求，并且对于阅读您的代码的新开发人员来说也更易读。

var inputHasValue = angular.isNumber(input) || input;
if(!inputHasValue){
    return '-';
}
if (!cellFilter) {
    return input;
}

var isPercentageCell = cellFilter.match(/pctg|percent|pctgFilter|incidence/ig);
var valueIsInRange = input > 0 && input < 1;
if(!isPercentageCell || valueIsInRange){
    return $filter(cellFilter)(input, args1, args2);
}
return '-';

【讨论】：

太棒了，谢谢@hankscorpio。现在我有几列我希望能够显示 0 和负值，你认为捕捉这些场景的最佳方法是什么？似乎我可能需要明确处理这些或使用不同的 cellFilter。
当您说要“显示”这些值时，您的意思是什么？按原样显示它们（即return input;）或返回由 cellFilter 过滤的它们？您可以在此函数中区分valueIsInRange 和valueIsInPercentRange。很难说真的不知道你想用它做什么。
是什么决定了您是否要在某些单元格中显示“0 和负值”而不在其他单元格中显示？
按原样显示它们（返回输入），在这一点上，决定哪些列我们要按原样返回 0 和负值确实是任意的。主要是货币列。
您必须在过滤器参数中做出一些区分（或者，正如您所说，只需使用不同的过滤器）。也许这可以类似于您使用cellFilter.match() 的方式来完成？您可以将额外的以冒号分隔的参数传递给过滤器来做到这一点：<span>{{myData | filterName: 'someArg': 'someOtherArg'}}</span> 如果您事先知道，最好为每种细胞类型制作不同类型的过滤器，然后您可以简化过滤器功能而不必担心检测要使用的过滤器。

【解决方案2】：

typeof x ==='number' || !!x

当 x 为空、未定义或空字符串时为假

只有一种情况它不起作用 - 如果您需要过滤布尔变量，但您的情况似乎不需要它。

无论如何你都可以使用

typeof x === 'boolean' || typeof x ==='number' || !!x

【讨论】：

不错，和 (x) 很相似，但是让我们通过 0 和负值？
hm，其实好像!!(-1) === true，但是!!(0) === false