Question

我需要一些帮助。

屏幕截图：https://monosnap.com/file/VxAdq975FVT6QHkECfxlFyHgGd3sAn

我有3个过滤器：房间，大小和价格。当在过滤器字段中输入内容时，如何过滤表格结果？

更新

$scope.$watch( '[min_size, max_size]', function(val) {
        $scope.filterBySizeRange();
    });

    $scope.filterBySizeRange = function() {
        $scope.filteredSizes = [];

        angular.forEach($scope.apps, function(items) {
            if (items.size >= $scope.min_size
                && items.size <= $scope.max_size) {
                $scope.filteredSizes.push(items);
            }

            if (!$scope.min_size 
                && !$scope.max_size) {
                $scope.filteredSizes.push(items);
            };
        });
    };

更新3 这是我的解决方案，适用于单个或多个范围输入字段

fiddle

Answer 1

我认为你想使用$watchGroup。

$scope.$watchGroup(['min_size', 'max_size'], function(val) {
        $scope.filterBySizeRange();
    });

    $scope.filterBySizeRange = function() {
        $scope.filteredSizes = [];

        angular.forEach($scope.apps, function(items) {
            if (items.size >= $scope.min_size
                && items.size <= $scope.max_size) {
                $scope.filteredSizes.push(items);
            }

            if (!$scope.min_size 
                && !$scope.max_size) {
                $scope.filteredSizes.push(items);
            };
        });
    };

无论如何，我相信创建自己的过滤功能会更好

// template

<div ng-repeat="item in apps|sizefilter:min_size:max_size">

//过滤器

app.filter('sizefilter', function() {
  return function(collection, minSize, maxSize) {

 var items = collection.slice(0, collection.length -1);
        var i =0, len = items.length
        for (; i < len;) {
            if (items.size < minSize && items.size > maxSize) {
                items.splice(i, 1);
            } else {
              i++;
            }
        }
        return items;
    });



  };
});

Answer 2

// Min/max size filter
$scope.sizeFilter = function(app){
    if (!$scope.min_size && !$scope.max_size) {
        return app;
    } else if(!$scope.max_size){
        return (app.size >= $scope.min_size);
    } else if(!$scope.min_size){
        return (app.size <= $scope.max_size);
    } else {
        return (app.size >= $scope.min_size && app.size <= $scope.max_size);
    }
}

Angular 3过滤器（输入和复选框）

2 个答案: