Je voudrais concevoir une fonctionnalité de sélection multiple en angulaire en utilisant bootstrap 4. Voici l'image ci-dessous.
Voici mon implémentation à partir de maintenant.
<div class="form-group">
<label>Employee privilege</label>
<select id="employeePrivelege" data-style="btn-default"
class="selectpicker form-control"
formControlName="employeePriveleges"
multiple data-max-options="2">
<option selected>Mustard</option>
<option selected>Barbecue</option>
</select>
</div>
J'ai 2 problèmes
selected sur option Je sais que cela se produit parce que je n'utilise pas jQuery et que je ne veux pas ajouter JQuery car ce n'est pas recommandé dans Angular.
Les questions que j'ai sont
3 Réponses :
Si vous utilisez la conception matérielle, cela vous aidera. Définissez le contrôle de formulaire et mettez-y la valeur que vous souhaitez afficher sélectionnée puis définissez la liste déroulante comme ceci
<mat-select placeholder="Select Units" formControlName="unit">
<mat-option *ngFor="let unit ofUnit" [value]="unit.slug">
{{unit.unit_name}}
</mat-option>
</mat-select>
Ce codepen a une sélection multiple Bootstrap 4 très similaire à ce que vous montrez. lien . Quand j'ai ajouté select dans le premier tel que:
<select class="custom-select" id="basic" multiple="multiple"> <option value="cheese" selected>Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select>
Cela a fonctionné comme prévu.
J'ai essayé votre code mais l'attribut sélectionné fonctionne bien pour moi.
J'ai créé un extrait sur w3schools qui montre qu'il fonctionne: lien vers l'extrait
Il semble qu'il ne soit pas sélectionné car les options sélectionnées sont grisées car le contrôle est inactif. Si vous ajoutez une autre option mais qui n'est pas sélectionnée, vous pouvez voir la différence. J'ai créé un autre extrait de code ici .
Mon simplifié le code ressemble à ça:
<select name="Sauces" multiple> <option value="Mustard">Mustard</option> <option selected value="Barbecue">Barbecue</option> <option value="Ketchup">Ketchup</option> <option selected value="Mayonaise">Mayonaise</option> </select>
J'ai également trouvé un composant angulaire qui fonctionne très bien:
https://www.npmjs.com/package/ng-multiselect-dropdown
J'ai créé un stackblitz démontrant le composant avec vos données ici
J'espère que cela vous aidera davantage. p>
essayant d'utiliser votre démonstration stackblitz mais résultant en RROR TypeError: impossible de lire la propriété 'idField' d'undefined
Ici, cela fonctionne très bien sur différents ordinateurs. Quel navigateur utilisez-vous? Recevez-vous des erreurs dans les outils de développement dans l'onglet réseau ou dans la console javascript?
Merci pour votre aimable réponse. Utiliser Chrome et obtenir une erreur dans la console Javascript
Impressionnant. J'ai déjà essayé quelques bibliothèques pour la sélection multiple, mais ng-multiselect-dropdown convient bien mieux que d'autres.
Vous pouvez utiliser ce npmjs.com/package/ng-multiselect-dropdown
qu'entendez-vous par menu déroulant multiple? comme un menu imbriqué ou un arbre? s'il s'agit d'un arbre, vous pouvez essayer de regarder ce material.angular.io/components/tree/overview