Javascript 在AngularJS中是否有一种更有效的基于屏幕大小的Limito实现方法？

我正在尝试设置带有ng重复的行，这些行在屏幕大小上受到限制。我已经设置好了所有的断点，我认为理论上我已经知道如何做到这一点，但我的第一次尝试似乎没有奏效。这就是我要尝试的

在控制器中，我要检查屏幕大小-

    $(window).resize(function(){
    var sizeCheck = window.innerWidth
        $scope.$apply(function(sizeCheck){
            if(sizeCheck >= 2250){
                $scope.sizeControl = 6;
            }else if(sizeCheck < 2250 && sizeCheck >= 1800){
                $scope.sizeControl = 5;
            }else if(sizeCheck < 1800 && sizeCheck >= 1600){
                $scope.sizeControl = 4;
            }else if(sizeCheck < 1600 && sizeCheck >= 1260){
                $scope.sizeControl = 3;
            }else if(sizeCheck < 1260 && sizeCheck >= 600){
                $scope.sizeControl = 2;
            }else if(sizeCheck < 600){
                $scope.sizeControl = 1;
            }
        });
    });

$（窗口）。调整大小（函数（）{
var sizeCheck=window.innerWidth
$scope.$apply（函数（sizeCheck）{
如果（sizeCheck>=2250）{
$scope.sizeControl=6；
}否则如果（sizeCheck<2250&&sizeCheck>=1800）{
$scope.sizeControl=5；
}否则如果（sizeCheck<1800&&sizeCheck>=1600）{
$scope.sizeControl=4；
}否则如果（sizeCheck<1600&&sizeCheck>=1260）{
$scope.sizeControl=3；
}否则如果（sizeCheck<1260&&sizeCheck>=600）{
$scope.sizeControl=2；
}否则如果（sizeCheck<600）{
$scope.sizeControl=1；
}
});
});

因此，在模板中，我只有：

<div ng-repeat="item in marketItemsTest | filter:searchPrivate | limitTo: sizeControl" 

=2250）{
$scope.sizeControl=6；
}否则，如果（sizeCheck2<2250&&sizeCheck>=1800）{
$scope.sizeControl=5；
}否则如果（sizeCheck2<1800和&sizeCheck>=1600）{
$scope.sizeControl=4；
}否则如果（sizeCheck2<1600&&sizeCheck>=1260）{
$scope.sizeControl=3；
}否则如果（sizeCheck2<1260&&sizeCheck>=600）{
$scope.sizeControl=2；
}否则如果（sizeCheck2<600）{
$scope.sizeControl=1；
}

这可以正常工作，但我想知道是否有一种更有效的方式在javascript中，或者通常是angular。这个函数在每次窗口移动时都会启动，并运行所有这些检查，所以我认为一定有更好的方法来实现这一点

如果您有任何意见，我们将不胜感激！感谢阅读。

您可以重用模块，使用该模块您的代码看起来像

if(matchmedia.isTablet()){
    $scope.sizeControl = 6;
}else if(matchmedia.isDesktop()){
    $scope.sizeControl = 10;
}else .....

如果你想让它更有效，只在大小改变时才改变，而不是在每个像素改变时，你可以使用它广播大小改变事件，你可以将它与上面的模块结合，然后

$scope.$on('breakpointChange', function(event, breakpoint, oldClass) 
{ 
    if(matchmedia.isTablet()){
        $scope.sizeControl = 6;
    }else if(matchmedia.isDesktop()){
        $scope.sizeControl = 10;
    }else .....
});

---

我还没有尝试将这两个ng模块结合起来

答案有用吗？

$scope.$on('breakpointChange', function(event, breakpoint, oldClass) 
{ 
    if(matchmedia.isTablet()){
        $scope.sizeControl = 6;
    }else if(matchmedia.isDesktop()){
        $scope.sizeControl = 10;
    }else .....
});