show more in AngularJS dropdown

Question

I have a select Dropdown created using AngularJS. We have set a limit to show the top 5 items and the remaining 5 items should be visible to the user . when he clicks the 5th item with the name "shore more (5)" , Without losing focus which means without closing the dropdown, remaining 5 items must be displayed and if a maximum height is reached scroll bar should automatically come. I tried this but could not find a solution.

Below is my code to create a select drop down

<div ng-if="items.groups.length>5"
    class="bx--select-input__wrapper" style="width: 100%">
    <select carbon-select class="dropDown-text-overflow bx--select-input"
        ng-model="selectedGroup"
        ng-change="selectNegotiatedGroup(selectedGroup)">
        <option class="bx--select-option"
            data-ng-repeat="groupName in items.groups|limitTo:5"
            value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
        <option ng-selected="false" value="show_more" ng-style="hideVisibility">Show More({{items.groups.length-5}})</option>
    </select>
</div>

Answer 1

// create some vars for pagination control
var displayIndex = 0;
var displayCount = $scope.items.groups.length < 5 ? $scope.items.groups.length : 5;

// create another array to display partial results
$scope.itemsToDisplay = $scope.items.groups.slice(displayIndex, displayCount);

// create a method to move pagination forward when called
$scope.showMore = function() {
  // calculate the index and max item count for the next page
  displayIndex++;
  var max = displayIndex * 5;
  if (max > $scope.items.groups.slice.length - 1) max = $scope.items.groups.slice.length - 1;
  // appends the array's calculated range to the array that is displayed in the view
  $scope.itemsToDisplay = $scope.itemsToDisplay.concat($scope.items.groups.slice(displayIndex, max - displayIndex));
   
}

In your view, you then have to display the itemsToDisplay array and get rid of the filter:

<div ng-if="itemsToDisplay.length>5"
    class="bx--select-input__wrapper" style="width: 100%">
    <select carbon-select class="dropDown-text-overflow bx--select-input"
        ng-model="selectedGroup"
        ng-change="selectNegotiatedGroup(selectedGroup)">
        <option class="bx--select-option"
            data-ng-repeat="groupName in itemsToDisplay"
            value="{{groupName.label}}" ng-selected="{{groupName.selected}}">{{groupName.label}}</option>
        <option ng-selected="false" value="show_more" ng-style="hideVisibility" ng-click="showMore()">Show More({{items.groups.length-5}})</option>
    </select>
</div>