Maison > interface Web > js tutoriel > Explication détaillée de la façon dont AngularJs + bootstrap implémente la boîte de sélection déroulante

Explication détaillée de la façon dont AngularJs + bootstrap implémente la boîte de sélection déroulante

零到壹度
Libérer: 2018-03-22 17:03:46
original
2566 Les gens l'ont consulté

Cet article explique principalement en détail comment implémenter la boîte de sélection déroulante dans AngularJs + bootstrap. Il est principalement partagé avec vous sous forme de code.

Environnement : bootstrap-select.js, bootstrap-select.css

Méthode 1

<select name="departInfo" ng-model="searchArgQry.departInfoSet" 
 class="form-control" multiple size="1" bootstrap-select="{&#39;liveSearch&#39;: true}">
        <c:forEach items="${departInfoList}" var="departInfo">
            <option value="${departInfo.id}">${departInfo.deptName}</option>
         </c:forEach>
 </select>
Copier après la connexion

où partInfoList est une liste Objet

Méthode 2

<select class="form-control" name="deptId" ng-model="searchArg.deptId"
     multiple ng-options="k as v for (k, v) in allDept" size="1" 
      bootstrap-select="{&#39;liveSearch&#39;: true}"></select>
Copier après la connexion

où allDept est l'objet Map, key est l'ID et value est la valeur

Effet :
Explication détaillée de la façon dont AngularJs + bootstrap implémente la boîte de sélection déroulante

Recommandations associées :

implémentation dans vue.js de boutons radio, de cases à cocher et de listes déroulantes

implémentation js Zones de sélection gauche et droite

implémentation js de la prise en charge des listes déroulantes pour l'ajout et la suppression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal