当未定义属性时,Angularjs Filter无法正常工作

时间:2015-12-18 09:38:08

标签: javascript angularjs angularjs-filter

我有以下设置

  $scope.array = 
    [
      {propertyA: "test", 
       propertyB: {
                   propertyC: [true, true, false]
                  }
      },
      {propertyA: "test2"},
      {propertyA: "test3"}
    ]

然后

<div ng-repeat="item in array| filter :{propertyB: ''} :true">
     {{item.propertyA}}
</div>

所以问题是:

  1. 此设置不显示任何内容

  2. 如果我更改为|filter :{propertyB: '!!'} :true,则不会显示任何内容

  3. 如果我更改为|filter :{propertyB: undefined} :true,则会显示所有内容

  4. 我无法理解。

    目标:我想显示propertyB未定义的项目,反之亦然。

    编辑1:如果我使用angular.equals(item.propertyB, undefined)迭代数组,我会得到false, true, true

    编辑2:jsfiddle UPDATED

    编辑3:我已更新了问题

3 个答案:

答案 0 :(得分:1)

$scope.array = 
[
  {propertyA: "test", propertyB: "test2"},
  {propertyA: "test2"},
  {propertyA: "test3"}
];
$scope.filteredArray =[];
angular.forEach($scope.array,function(eachData){
   if(angular.isUndefined(eachData.propertyB))
   $scope.filteredArray.push(eachData);
});

$scope.filteredArray是你想要的数组,你可以在重复中使用它来进行html绑定。

答案 1 :(得分:1)

您在filter上添加了ng-repeat,因此您将获得collection作为过滤器的输入,而不是单个数组元素,因此您的实现将无效。

如Kunal所述,尝试先过滤数组并重复过滤数组。 或在双花括号{{}}内添加过滤器。

检查此plnkr

答案 2 :(得分:0)

我结束了这样做。

.filter('undefinedProperties', ['$filter', function ($filter) {
        var checkProperty = function (property, returnUndefined) {
            if (returnUndefined) {
                if (property !== undefined) {
                    return true;
                } else {
                    return false;
                }
            } else {
                if (property === undefined) {
                    return true;
                } else {
                    return false;
                }
            }
        };
        return function (input, propertyArray, returnUndefined) {
            if (angular.isArray(propertyArray)) {
                if (angular.isArray(input) && input.length > 0) {
                    angular.forEach(propertyArray, function (property) {
                        for (var i = input.length; i-- > 0;) {
                            if (checkProperty(input[i][property], returnUndefined)) {
                                input.splice(i, 1);
                            }
                        }
                    });
                }
                return input;
            } else {
                throw "PropertyArray is not an array";
            }
        };
    }])