AngularJS - 如何在窗口调整大小时在 ng-repeat 中重复行答案

【问题标题】：AngularJS - How to repeat row in ng-repeat at window resizeAngularJS - 如何在窗口调整大小时在 ng-repeat 中重复行
【发布时间】：2017-02-26 01:04:43
【问题描述】：

我正在使用this 在来自 ng repeat 的 col-* 之后重复行。

现在更进一步并处理一个额外的代码，我想在控制器中使用$(window).width() 处理拆分，但我无法做到这一点......

这是我所做的Plunker demo。我已经评论了 if 条件，该条件目前不起作用。

谁能帮帮我？

【问题讨论】：

Plunker 不工作。至少在我的 FF 结束时。
对我有用，伙计，也尝试过以隐身模式打开。以防万一这里再次出现链接plnkr.co/edit/5gojtzqdJavkBEQLwSeA 确保你运行它
尝试将 $window 注入您的控制器。它有效！

标签： javascript angularjs media-queries window-resize

【解决方案1】：

您不需要将 Angular、jQuery 和 JavaScript 作为一个整体来设置将在不同分辨率下显示的项目数。这是一个 CSS 问题。
除此之外，您可以在 directive 中使用 Angular 中的 jQuery，而不是在 controller 中。控制器不像它那样用于 DOM 操作，它必须是特定模块的业务逻辑。
Angular 有一个内置的angular.element（如果 jQuery 可用），它是 jQuery 函数的别名。它将原始 DOM 元素或 HTML 字符串包装为 jQuery 元素。如果 jQuery 不可用，angular.element 将委托给 AngularJS 的内置 jQuery 子集，称为 jQuery lite 或 jqLite。
您可以阅读有关在 Angular here 中使用 jQuery 的更多信息。

$window

是 Angular 服务，它引用浏览器的 window 对象。您应该将其注入控制器，以便在控制器的功能中使用它。

【讨论】：

【解决方案2】：

你需要用 jquery 观察窗口大小调整事件，这就是你所需要的

$(window).resize(function(){


    $scope.$apply(function(){
       if ($(window).width() >= 990){   
        $scope.teamMembers = $scope.chunk($scope.allMembers, 4);
     } else if ($(window).width() <= 991)  {
        $scope.teamMembers = $scope.chunk($scope.allMembers, 2);
         }
    });
  });

Plnkr

【讨论】：