Comment limiter l'option visible dans une liste déroulante à l'aide de ngOptions

J'utilise ngOptions pour mon menu déroulant. Puisque mon menu déroulant a beaucoup d'options, je veux limiter les éléments visibles dans la liste déroulante à 5. L'utilisateur devrait être en mesure de faire défiler les autres options.Comment limiter l'option visible dans une liste déroulante à l'aide de ngOptions

HTML

<select ng-model="model.year" ng-options="year for year in model.yearOptions"></select>

Javascript

$scope.yearOptions = ["2017","2018","2019","2020","2021", "....","2050"]; 
$scope.model.year = "2017";

Ce ne doit pas être confondu avec la taille/ng taille qui augmente la hauteur de la boîte d'origine lui-même.

Source

2017-10-19 Pankaj

voir cet exemple peut-être vous aider à https://jsfiddle.net/88cxzhom/27/ –

Pouvez-vous expliquer comment est-ce pas la propriété 'size' de html? La taille fait exactement ce que vous demandez - donc size = "5" montrerait 5 éléments et vous seriez capable de faire défiler les autres. Essayez de poster du code sur plnkr violon ou quelque part afin que nous ayons une meilleure idée. – pegla

@FerhadOthman Merci, votre exemple est bon, mais il élargit la div existante et les éléments ci-dessous descendent. Je veux limiter les options visibles dans le parchemin. S'il vous plaît voir l'image ajoutée. – Pankaj

Vous pouvez définir le style des options de sélection, mais il est pas facile ou cohérente entre les différents navigateurs. Voici un bon article sur le sujet: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms#Dealing_with_the_select_nightmare

Essayez d'attribuer à votre balise de sélection une propriété height et overflow.

Exemple: <select class="myClassName" ng-option="..."></select> ... .myClassName { height: 5em; overflow: auto;}

Source

2017-10-19 20:13:17 Ericson578

essayez d'utiliser limitTo filtre:

<select ng-model="model.year" 
     ng-options="year for year in model.yearOptions | limitTo : 5"></select>

plunker: https://plnkr.co/edit/65l35x?p=preview

Source

2017-10-19 20:27:24 Andriy

limitTo rend le reste des options inaccessibles. Je veux que l'utilisateur puisse accéder à ceux qui utilisent le défilement. – Pankaj

essayer d'ajouter size = "5"

<select size="5" ng-model="model.year" ng-options="year for year in model.yearOptions"></select>

Source

2017-10-19 21:50:40 rafaelsr

Comment limiter l'option visible dans une liste déroulante à l'aide de ngOptions

Répondre

Questions connexes