angularjsbootstrap-4angularjs-directiveangularjs-scopeangularjs-ng-repeat

show more in AngularJS dropdown


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>

Solution

  • // 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>