All geek questions in one place

How to handle a large list of items in the angular -ui drop-down list?

I am using angular -ui drop down

It works fine, but I don’t know how to handle multiple items in a drop down list.

Consider the following example in Plunker

HTML

<div class="btn-group" dropdown is-open="status.isopen"> <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled"> Button dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="item in items"><a href="#">{{item}}</a></li> </ul> </div>

I want to define scrolling and set the dropdown to be shorter.

Any ideas?

+5
source share
1 answer

You may just have a css rule to define this, for dropdown-menu .

  .dropdown-menu{ max-height: 300px; /*Provide height in pixels or in other units as per your layout*/ overflow-y: auto; /*Provide an auto overflow to diaply scroll*/ }

Plnkr

Or, as a rule, you might want your application to have its own style in the drop-down list, in such cases add a custom class and a rule for your drop-down lists (so that your site does not look like a boot site :)) example: -

 angular.module('plunker', ['ui.bootstrap']); function DropdownCtrl($scope) { $scope.items = []; for(i=0; i<100; i++){ $scope.items.push("val_" + i); } $scope.status = { isopen: false }; $scope.toggled = function(open) { console.log('Dropdown is now: ', open); }; $scope.toggleDropdown = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.status.isopen = !$scope.status.isopen; }; } 
 .btn-group.myapp-select .btn.dropdown-toggle{ color:blue; background:#cecece; border-radius:2px; } .btn-group.myapp-select.open .btn.dropdown-toggle{ background-color: #afafaf; font-weight: bold; } .myapp-select > ul.dropdown-menu{ max-height: 300px; overflow-y: auto; border-radius:2px; } .myapp-select > ul.dropdown-menu > li{ color:blue; background:#cecece; } 
 <!doctype html> <html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <style> .btn-group.myapp-select .btn.dropdown-toggle{ color:blue; background:#cecece; border-radius:2px; } .btn-group.myapp-select.open .btn.dropdown-toggle{ background-color: #afafaf; font-weight: bold; } .myapp-select > ul.dropdown-menu{ max-height: 300px; overflow-y: auto; border-radius:2px; } .myapp-select > ul.dropdown-menu > li{ color:blue; background:#cecece; } </style> </head> <body> <div ng-controller="DropdownCtrl"> <!-- Single button --> <div class="btn-group myapp-select" dropdown is-open="status.isopen"> <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled"> Button dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="item in items"><a href="#">{{item}}</a></li> </ul> </div> </div> </body> </html>
+17
source

Source: https://habr.com/ru/post/1203081/

More articles:


All Articles