如何顯示no。基於Angular.js中媒體屏幕大小的按鈕？

Question

最初以上的媒體屏幕尺寸我將在兩個箭頭（左箭頭和右箭頭）之間顯示圖6（n）的按鈕20人中。最初的左箭頭將不活動。當用戶點擊右箭頭時，左箭頭應該處於活動狀態，並將導航到下一個按鈕（n + 1）（達到結束後，右箭頭將變爲非活動狀態）。

當媒體屏幕尺寸被減小比我需要顯示的兩個箭頭之間的有限的按鈕。

我已硬編碼的按鈕的數量，以作爲可見6 =>$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（周圍）。默認情況下，窗口1207 $ scope._lastRoleIndex是5這意味着$ scope._lastRoleIndex =二百四十零分之一千二百零七（角落找尋）。所以你可以做的是根據與下面的代碼窗口寬度得到按鈕的數量，

$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 = []; 

可能是它可以幫助你。祝你好運:)