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>

mindthefrequency · Accepted Answer · 2022-11-16 13:21:42Z

2

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

edited Nov 16, 2022 at 13:21

answered Nov 16, 2022 at 13:11

mindthefrequency

5462 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user2918673 Over a year ago

What is $scope.items.groups here ?

mindthefrequency Over a year ago

from your code: "data-ng-repeat="groupName in items.groups|limitTo:5"" so I'm assuming its the array that originally contains the data you want to display. $scope.items.groups is how you access it from your controller.

user2918673 Over a year ago

When i clicked show more , it closes the drop down and does not display the extra items with a scroll bar , the expectation was to make the drop down remain open when show more is clicked and adda scroll bar for the extra items if it crosses a maximum height

user2918673 Over a year ago

ng-click is not getting called , ng-change is only triggered

mindthefrequency Over a year ago

sorry, the pattern I provided works for me when it comes to adding X items of something to something else on each click. Obviously you'll have to complement with css, but I won't do the work for you.

|

Collectives™ on Stack Overflow

show more in AngularJS dropdown

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related