AngularJS控制器中筛选newName字段非空的JSON数组

我明白你遇到的麻烦了——用AngularJS内置的$filter('filter')处理非空（尤其是空白字符串）的筛选时，默认的对象匹配规则确实容易踩坑。咱们一步步来解决这个问题：

为什么你之前的尝试失效？ #

先理清楚你遇到的几个问题：

• newName: '!'：AngularJS的默认筛选是模糊匹配，这个规则会去找newName中包含!字符的对象，你的数据里没有这类值，所以返回0条。
• newName: '!""'：非严格匹配模式下，这个表达式会被解析为“不包含""的字符串”，但几乎所有字符串都不包含双引号对，所以会返回全部数据。
• newName: '!=null'：空白字符串""并不等于null，所以这个规则会把空白字符串的对象也保留下来，达不到你要的“非空”效果。

靠谱的解决方案 #

方案1：自定义筛选函数（最灵活推荐） #

用自定义函数作为筛选器，可以精准控制筛选逻辑，比如排除空白字符串、全空格字符串，甚至处理字段不存在的情况：

// 筛选newName存在且非空白（排除全空格）的对象
const filteredList = $filter('filter')($scope.dataList, function(item) {
  // 先判断字段存在，再排除空字符串和全空格
  return item.newName && item.newName.trim() !== '';
});

$scope.CorrectedNames = filteredList.length;
console.log('Total Names to Update: ' + $scope.CorrectedNames);

如果不需要排除全空格的情况，只去掉空字符串，可以把trim()去掉，改成return item.newName !== '';。

方案2：严格匹配模式下的表达式 #

如果想用对象表达式的方式，可以开启严格匹配（第三个参数传true），这样!""就会严格匹配“不等于空字符串”的对象：

const filteredList = $filter('filter')($scope.dataList, { newName: '!""' }, true);
$scope.CorrectedNames = filteredList.length;
console.log('Total Names to Update: ' + $scope.CorrectedNames);

注意：这个方法不会排除全空格的字符串（比如" "会被保留），如果需要排除这类情况，还是方案1更合适。

示例验证 #

假设你的数据源是：

$scope.dataList = [
  { newName: 'bob' },
  { newName: '' },
  { newName: 'alice' },
  { newName: '   ' },
  { otherField: 'no newName' }
];

• 方案1会返回['bob', 'alice']，长度为2；
• 方案2会返回['bob', 'alice', ' ']，长度为3。

根据你的需求选择对应的方案就好啦！

内容的提问来源于stack exchange，提问作者Vereonix