带有项目符号的下拉列表答案

【问题标题】：Drop-down list with bullets带有项目符号的下拉列表
【发布时间】：2017-12-16 19:55:51
【问题描述】：

我想使用 Angular 2 和 JavaScript & CSS 创建一个带有项目符号的下拉列表。我创建了一个下拉列表，但无法在列表中创建项目符号。

这是 jQuery、Bootstrap 无法实现的。有什么建议吗？

这是我的代码。

 dropdownList.component.ts

 import { Component} from '@angular/core';
 import{FormsModule } from '@angular/forms';
 import {Option} from './option';

 @Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
  })
  export class DropdownComponent {

  selectedItem:Option= new Option(1,'../../assets/blue2.png','option1');

  options= [
   new Option(1,'../../assets/blue2.png','option1'),
   new Option(2,'option2'),
   new Option(3,'option3'),
   new Option(4,'option4')

    ];

 // OPtion.ts


   export class Option{


    constructor(public id?: number, public img?:string, public name?: 
     string ) 
     {
      }
    }

   // component.html:


  <select class="dropdown" id="style">
  <option *ngFor="let Option of options" value={{Option.id}} 
   class="dropdownList">{{Option.name}}{{Option.img}}

   </option>
    </select>

【问题讨论】：

也许创建一个<ul> 列表是个好主意，并且每个选项都嵌套在<li> 标记中？
谢谢，但我怎样才能将
ng-select.github.io/ng-select#/forms 似乎是个不错的选择

标签： javascript css angular

【解决方案1】：

CSS 可以使任何东西看起来像其他东西。我实现了一个非常简单的下拉菜单，但只有非常基本的功能。要完成此下拉列表，您仍然需要实现 ngModel 和标签/值下拉项。但我认为这已经有了你所描述的内容。

import { Component } from '@angular/core'

@Component({
  selector: 'demo-dropdown',
  template: `
    <div class="ui-dropdown">
      <label class="ui-dropdown-label">{{selectedItem}}</label>
      <span class="ui-dropdown-button" (click)="showList = !showList">﹀</span>
      <ul class="ui-dropdown-list" [class.active]="showList">
        <li *ngFor="let item of items" (click)="onItemSelected($event)">{{item}}</li>
      </ul>
    </div>
  `,
  styles: [`
    *{
       box-sizing: border-box; 
    }
    .ui-dropdown{
      background: #fff;
      border: 1px solid black;
      border-radius: 3px;
      display: inline-flex;
      flex-wrap: wrap;
      padding: 0;
      user-select: none;
      width: 250px;
    }
    .ui-dropdown-label{
      flex: 1 1 0;
      padding: 0.2em 0.5em;
    }
    .ui-dropdown-button{
      border-left: 1px solid black;
      cursor: pointer;
      flex: 0 0 20px;
      padding-top: 0.2em 0.2;
    }
    .ui-dropdown-list{
      background: #fff;
      border: 1px solid black;
      border-radius: 3px;
      display: none;
      flex: 0 0 100%;
      margin: 0;
      margin-top: 25px;
      padding: 0;
      position: absolute;
      width: 250px;
    }
    .ui-dropdown-list.active{
      display: block;
    }
    .ui-dropdown-list>li{
      cursor: pointer;
      list-style: none;
    }
    .ui-dropdown-list>li::before{
      content: '．';
    }
    .ui-dropdown-list>li:hover{
      background: #eee;
    }
  `]
})
export class DemoDropdown{
  showList:boolean = false;
  selectedItem:string = null;
  items: OptionItem[] = ["option 1","option 2"];

  constructor() { }

  onItemSelected(e){
    this.selectedItem = e.target.innerText;
    this.showList = false;
  }
}

【讨论】：