Maison  >  Article  >  interface Web  >  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

零到壹度
零到壹度original
2018-03-22 17:03:462523parcourir

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>

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>

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!

Déclaration:
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