Angularjs过滤器允许使用自定义比较器的空值不起作用？

Question

[Revised] 我找到了一个解决方案，只需将 AngularJs 与 ver 一起使用。 >= 1.3.6，具有空属性的项目在应用过滤器并取消它后不会被丢弃！！

以下是原始问题

大家好。我使用 AngularJs 在带有 ng-repeat 指令的表格中显示数据，并使用文本框来过滤猫的“颜色”属性。请注意，有些猫的 Color 属性为空。

一旦我在文本框中输入一些文本并清除它，所有颜色属性为空的猫都消失了。

我在expected === '' 上设置了一个返回 true 的自定义比较器，但它不起作用。实际上，一旦搜索文本框被放入一些文本并随后被清除，所有颜色为property === null 的猫将永远不会显示，即使我让比较器始终返回 true。

在 ng-repeat 中使用过滤器时，有什么方法可以允许空值？谢谢你的提前！！

JS Fiddle 演示：http://jsfiddle.net/gLL7wvcL/2/

我的数据（猫数组）

$scope.cats = [
{'Name': 'John',
 'Sex': 'Male',
 'Color': 'Black'},
{'Name': 'Rose',
 'Sex': 'Female',
 'Color': 'White'},
  {'Name': 'Cindy',
 'Sex': 'Female',
 'Color': 'Yellow'},
  {'Name': 'David',
 'Sex': 'Male',
 'Color': 'Black'},
  {'Name': 'Garen',
 'Sex': 'Male',
 'Color': null},
  {'Name': 'Jim',
 'Sex': 'Male',
 'Color': null},
  {'Name': 'Charotte',
 'Sex': 'Female',
 'Color': 'Black'}
];

并且两个比较器都不起作用，一旦搜索文本框被放入一些文本并随后被清除，所有具有颜色属性 === null 的猫将永远不会显示。

$scope.myComparator = function (actual, expected) 
  {
      if (expected === '') 
          return true;
      else
      {
          var text = ('' + actual).toLowerCase();
            return text.indexOf(expected) > -1;
      }
  };

$scope.myComparator = function (actual, expected) 
  {
      return true;
  };

Answer 1

这里的问题是，在你清除输入后，过滤器模型是这样的：

{"Color": ""}

所以空字符串不会匹配颜色与颜色null。如果它是null，您只需要删除“颜色”属性，可能正在更改。在这种情况下，您根本不需要myComparator：

$scope.clear = function() {
    if ($scope.search.Color === null) {
        delete $scope.search.Color;
    }
};

你只会使用

ng-repeat="cat in cats | filter:search"

演示：http://plnkr.co/edit/MrvBa09y9SrE3TlTUxP6?p=preview

Answer 2

另一种方法是使用过滤器函数，与整个对象而不是属性进行比较，并将条件附加到控制器范围。

标记：

<tr ng-repeat="cat in cats | filter:myComparator">

控制器：

$scope.myComparator = function (actual) 
{
    var expected = $scope.filter;
    if (expected === '') 
    {
        return true;
    }
    else
    {
        var text = ('' + actual.Color).toLowerCase();
        return text.indexOf(expected) > -1;
    }
};

更新的小提琴中的完整示例：http://jsfiddle.net/gLL7wvcL/3/

Answer 3

if (expected === '') 将检查空字符串，而不是 null。

尝试用

替换它

如果（！预期） .....