Question

是否可以在特定的屏幕尺寸上使用Angular更新ng-repeat？

我有20个div，但是在640px及以下我想只显示6个，在640px 1024px之间我希望显示15和大于1024px我想显示所有20个。

正如我所提到的，我正在使用ng-repeat来推广div，我希望能够重新启动？（不确定这是否是正确的术语，我正在学习）当浏览器达到其中一种尺寸时，ng-repeat功能。 ng-repeat将根据推出所需的项目数量进行更新，然后将其推出。

这就是我设置ng-repeat的方法：

.articles(ng-controller="articlesCtrl")
  .article(ng-repeat="article in articles | limitTo:15", class='item-{{ $index + 1 }}')

Answer 1

limitTo是angular filter，当你设置其变量时，ng-repeat指令会重新编译它的内容（更多关于directives和$compile）

你也可以设置一个功能：

ng-repeat="item in items | limitTo:calcLimit()"

然后返回你需要的东西

  $scope.calcLimit = function(limit) {
    if (resolution >= 1024)
      return 10;
    else if (resolution >= 640)
      return 6;
    else
      return 3;
  };

plunker example玩得开心！ =）

Answer 2

正如Sasxa所说，声明一个范围变量，如“myScopeVar”或“someValue”

JS - 在您的控制器中

$scope.numDisp = 6;
// based on screen width, but you can base on height as well http://www.w3schools.com/js/js_window_screen.asp
if(window.screen.width < 641)
    $scope.numDisp = 6; // 
else if(window.screen.width > 640 && window.screen.width < 1025)
    $scope.numDisp = 15
else if(window.screen.width > 1024)
    $scope.numDisp = 20

HTML：

.article(ng-repeat="article in articles | limitTo: numDisp", class='item-{{ $index + 1 }}')

更新

我看着你的傻瓜，注意到你应该在你的指令中触发屏幕宽度检查。

var app = angular.module（'plunker'，[]）;

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10
  ];

  $scope.numDisp = 3;

});

app.directive('resizable', function($window) {
  return function($scope) {
    $scope.initializeWindowSize = function() {
      $scope.windowHeight = $window.innerHeight;
      // do width check here, especially since you have $window object here already
      if($window.innerWidth < 641)
          $scope.numDisp = 3; // 
      else if($window.innerWidth > 640 && $window.innerWidth < 1025)
          $scope.numDisp = 5;
      else if($window.innerWidth > 1024)
          $scope.numDisp = 10;

      console.log($window.innerWidth, $scope.numDisp); // check console for right output

      return $scope.windowWidth = $window.innerWidth;
    };
    $scope.initializeWindowSize();
    return angular.element($window).bind('resize', function() {
      $scope.initializeWindowSize();
      return $scope.$apply();
    });
  };
});

是否可以在响应断点处更新ng-repeat？

2 个答案: