Angular - 过滤以从数组中删除空白字符串答案

【问题标题】：Angular - Filter to remove blank strings from arrayAngular - 过滤以从数组中删除空白字符串
【发布时间】：2014-12-07 20:26:35
【问题描述】：

我有一个数组对象...数组可以包含空格，我如何创建一个角度过滤器来删除空格以确定数组的长度？

$scope.myData = {
    ["1", "1", "4", "4", "N", "4", "6", "8", "", "", "", "", "", "", "", "", "", "", ],
    ["2", "2", "4", "6", "0", "6", "5", "4", "2", "", "8", "", "", "", "", "", "", "", ],
    ["2", "3", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ],
    ["3", "F", "D", "3", "5", "1", "D", "5", "", "", "", "", "", "", "", "", "", "", ],
    ["1", "V", "4", "4", "3", "2", "1", "1", "4", "", "", "", "", "", "", "", "", "", ],
    ["4", "5", "8", "6", "4", "2", "8", "7", "1", "1", "2", "", "", "", "", "", "", "", ],
    ["4", "4", "R", "F", "D", "8", "4", "2", "4", "8", "7", "4", "8", "", "", "", "", "", ],
    ["D", "5", "F", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ],
    ["1", "4", "1", "3", "4", "B", "D", "G", "", "", "", "", "", "", "", "", "", "", ]
}

HTML：

<div ng-repeat="data in myData">
    <div ng-show="(data | myFilter).length > 10">
        Show if length greater than 10
    </div>


    <div ng-show="(data | myFilter).length > 15">
        Show if length greater than 15
    </div>
</div>

谢谢

【问题讨论】：

docs.angularjs.org/guide/filter 有一个名为“创建自定义过滤器”的部分。阅读并实现您的过滤器。
而且，为了记录，您的对象无效。

标签： angularjs angularjs-scope angularjs-ng-repeat ng-show ng-hide

【解决方案1】：

使用此链接 https://github.com/a8m/angular-filter

它为您提供了多种过滤任何格式所需内容的方法。它还提供了每个过滤器的示例。

【讨论】：

一个关于如何使用该库执行此操作的示例将是一个更具建设性的答案。

【解决方案2】：

首先我要说明的是，你的 JS 对象是无效的。

在这种情况下，请使用数组数组而不是数组对象。

$scope.myData = [
   ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "7", "8", "", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "7", "", "", "", "", "", "", "", "", "", "", "" ],
   ["1", "2", "3", "4", "5", "6", "", "", "", "", "", "", "", "", "", "", "", "" ]
];

其次，我创建了过滤器来删除空白项。

.filter('removeBlankItems', function() {
    return function(inputArray) {
      var outArray = [];
      for (var i = 0; i < inputArray.length; i++) {
          if(inputArray[i].length != 0){
             outArray.push(inputArray[i]);     
          }
      }
      return outArray;
    };
})

这是JSFiddle 的工作示例。

【讨论】：

【解决方案3】：

var app = angular.module('app', []);
app.filter('myFilter', function() {

  return function(input) {
    var newInput = [];
    angular.forEach(input, function(item) {
      console.log(item);
      if (item != "") newInput.push(item);
    });
    return newInput;
  };
});


app.controller('fCtrl', function($scope) {

  $scope.myData = [
    ["1", "1", "4", "4", "N", "4", "6", "8", "", "", "", "", "", "", "", "", "", ""],
    ["2", "2", "4", "6", "0", "6", "5", "4", "2", "", "8", "", "", "", "", "", "", ""],
    ["2", "3", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["3", "F", "D", "3", "5", "1", "D", "5", "", "", "", "", "", "", "", "", "", ""],
    ["1", "V", "4", "4", "3", "2", "1", "1", "4", "", "", "", "", "", "", "", "", ""],
    ["4", "5", "8", "6", "4", "2", "8", "7", "1", "1", "2", "", "", "", "", "", "", ""],
    ["4", "4", "R", "F", "D", "8", "4", "2", "4", "8", "7", "4", "8", "", "", "", "", ""],
    ["D", "5", "F", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["1", "4", "1", "3", "4", "B", "D", "G", "", "", "", "", "", "", "", "", "", ""]
  ];




});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="fCtrl">

    <div ng-repeat="data in myData ">
      <span>{{data | myFilter }}</span>
      <div ng-show="(data | myFilter).length > 10">
        Show if length greater than 10
      </div>


      <div ng-show="(data | myFilter).length > 15">
        Show if length greater than 15
      </div>
      <hr/>
    </div>
  </div>
</div>

【讨论】：

一个使代码更小的建议：在myFilter 内部，您可以使用 Angular 预先存在的$filter 将其简化很多。 return $filter('filter')(input, '!', true); 而不是整个forEach 等（'!' 表示否定“匹配空字符串”，最后的true 参数表示严格字符串匹配）

【解决方案4】：

其他答案对我不起作用，angular-filter 在这种情况下没有任何特定能力，但以下在我的 Angular 应用程序中有效。无需自定义过滤器。

arr = ["", "foo", "bar"];
arr.filter(Boolean);

浏览器兼容性：http://kangax.github.io/compat-table/es5/#Array.prototype.filter

【讨论】：