Question

最初在媒体屏幕大小 1207 之上，我将在两个箭头（左箭头和右箭头）之间显示20个中的6个（n）按钮。最初左箭头将处于非活动状态。当用户点击右箭头时，左箭头应该激活并将导航到下一个按钮（n + 1）（到达右上箭头后将变为非活动状态）。

当媒体屏幕尺寸减小时，我需要在两个箭头之间显示有限的按钮。

我已经将按钮数量硬编码为6 =＆gt; $scope._lastRoleIndex = 5;，这将显示6个按钮。

但我需要在两个箭头（左箭头和右箭头）内动态显示按钮。

我的控制器：

$scope._firstRoleIndex = 0;
$scope._lastRoleIndex = 5;
$scope.isLeftRoleActive = false;
$scope.isRightRoleActive = true;
$scope.filteredRoles = [];

/** Show Prev Image **/
$scope.showPrev = function () {

    if ($scope._firstRoleIndex > 0) --$scope._lastRoleIndex;
    $scope._firstRoleIndex = ($scope._firstRoleIndex > 0) ? --$scope._firstRoleIndex : 0;

    if ($scope._firstRoleIndex == 0) {
        $scope.isLeftRoleActive = false;
        $scope.isRightRoleActive = true;
    }

    $scope.showFilteredRoles();

};

/** Show Next Image **/
$scope.showNext = function () {
    debugger;
    if ($scope._lastRoleIndex < $scope.roles.length - 1) ++$scope._firstRoleIndex;
    $scope._lastRoleIndex = ($scope._lastRoleIndex < $scope.displayrole.length - 1) ? ++$scope._lastRoleIndex : $scope.displayrole.length - 1;

    if ($scope._lastRoleIndex == $scope.displayrole.length - 1) {
        $scope.isLeftRoleActive = true;
        $scope.isRightRoleActive = false;
    }

    $scope.showFilteredRoles();
};

/** Show Filtered Image **/
$scope.showFilteredRoles = function () {
    debugger;
    console.log($scope._lastRoleIndex);

    $scope.filteredRoles = [];

    if ($scope.displayrole.length >= 5) {
        for (var i = $scope._firstRoleIndex; i <= $scope._lastRoleIndex; i++) {
            $scope.filteredRoles.push($scope.displayrole[i]);
        }
    } else {
        for (var i = $scope._firstRoleIndex; i <= $scope.displayrole.length - 1; i++) {
            $scope.filteredRoles.push($scope.displayrole[i]);
        }
    }


};

我的HTML

<section class="showPrevious">
    <img src="css/images/left-nav_active.png" alt="" class="arrow" ng-click="showPrev()" ng-show="isLeftRoleActive" style="cursor: pointer;" />
    <img src="css/images/left-nav_inactive.png" alt="" class="arrow" ng-hide="isLeftRoleActive || displayrole.length<=6" style="cursor: not-allowed;" />
</section>

<section class="mytopmenu">
    <ul class="myul" role="tablist">

        <li class="myli" ng-repeat="role in filteredRoles track by $index" ng-class="{active:isSelected($index)}"><a href ng-click="displaySelectedRole(role, $index)">{{role}}</a></li>


    </ul>
</section>
<section class="showNext"><img src="css/images/right-nav_active.png" alt="" class="arrow" ng-click="showNext()" ng-show="isRightRoleActive" style="cursor: pointer;" ng-hide="displayrole.length<=6" />
    <img src="css/images/right-nav_inactive.png" alt="" class="arrow" ng-hide="isRightRoleActive || displayrole.length<=6" style="cursor: not-allowed;" />
</section>

Answer 1

在您的情况下，您希望根据窗口大小显示按钮。它表明您不想减小按钮的大小。默认情况下，您在1207窗口大小上显示6个按钮，这意味着一个按钮200（arround）。默认情况下，1207窗口$ scope._lastRoleIndex为5表示 $ scope._lastRoleIndex = 1207/240 （arround）。所以你可以做的是根据窗口宽度获得按钮数量，代码如下，

  $scope._firstRoleIndex   = 0;
  $scope._lastRoleIndex = Math.round(window.innerWidth/240)
  if($scope._lastRoleIndex < 1){ $scope._lastRoleIndex = 1 }

   $(document).ready(function(){
      $(window).resize(function(){
       $scope._lastRoleIndex = Math.round(window.innerWidth/240)
       if($scope._lastRoleIndex < 1){ $scope._lastRoleIndex = 1 }
       $scope.showFilteredRoles();
       $scope.$$phase || $scope.$apply();
      });
  });

  $scope.isLeftRoleActive     = false;
  $scope.isRightRoleActive    = true;
  $scope.filteredRoles  = [];

可能对你有帮助。祝你好运:)）

如何显示没有。 Angular.js中基于媒体屏幕大小的按钮？

1 个答案: