Existe-t-il un moyen pour angulaire-choisi que lorsque je cherche du texte, mais montrant des options avec des icônes dans AngularJs?

Question

Par exemple, j'ai une liste d'éléments comme suit:

[{ 
    id: 1, 
    name: 'The only planet with life that currently found', 
    icon: 'base64-blablalbla', 
    abbr: 'Earth' 
}, { 
    id: 2, 
    name: 'Another string that describes M*a*r*s', 
    icon: 'base64-blablalbla', 
    abbr: 'Mars' 
}, { 
    id: 3, 
    name: 'Another string that describes M*o*o*n', 
    icon: 'base64-blablalbla', 
    abbr: 'Moon' 
}] 

Je veux utiliser le plugin choisi que lorsque je recherche « ar » (a frappé la Terre et Mars) sur le champ « abbr », les sélections qui affiche leurs icônes seront affichées. Contrairement au comportement général, recherchez le champ "name" dans le champ "name", mon exigence est de rechercher dans le champ "abbr", mais en affichant le champ "icon", ou en affichant le nom + icon ou que je peux personnaliser. sois le meilleur.

select2 ou tout autre plugin est également le bienvenu.

Quelqu'un peut-il m'aider? Merci d'avance.

Answer 1

Vous pouvez réaliser ce petit morceau un CustomPipe:

<div *ngFor="let item of items | yourCustomPipe:'id,text':query"> 
    <i [ngClass]="item.icon"></i> 
</div> 

Mais soyez carreful, Pipe can slow your app

Alors puis, vous avez un custom Pipe which will filter your items.