Proceso de desarrollo y resolución de problemas de cambiar la opción única de Angularjs a múltiple

Requisito simple: Antes, la caja desplegable era de selección única, ahora quiero cambiarla a selección múltiple.

Proceso de desarrollo:

Pregunta 1:Primero pensé en buscar un ejemplo en línea, y descubrí que AngularJS tiene paquetes js correspondientes para implementar, de los cuales el más común es isteven.-multi-select y angularjs-dropdown-multiselect, etc.

Descargué, pero cuando lo utilicé en mi proyecto, se veía realmente mal. Además, parece que estos paquetes js tienen una alta耦合idad, no son lo que necesito, por lo que aún planeo usar un md simple.-select、md-option、md-checkbox

Para lograr el efecto que quiero, sin parecer demasiado artificial, busqué algunos demos de controles de angularjs y finalmente encontré lo que necesitaba.

https://material.angularjs.org/1.1.3/demo/select

Entonces comencé a implementarlo en el proyecto, pero no podía obtener el estilo del demo, aunque la selección múltiple funcionó, no tenía la caja de selección cuadrada como el checkbox, busqué en baidu y google, pero no sabía por qué. Originally planeé darme por vencido, pero este demo tan bueno, este js tan conveniente, no podía darme por vencido, además, si lo dejaba, no podía encontrar otro estilo adecuado y no se notaba. Entonces me tranquilicé y vi una y otra vez la configuración, todas estaban bien, excepto la versión不一致. ¿Dónde está? Mi sexto sentido me dice que tal vez es por razones de versión. La versión que usé antes era "angular-material": "1.0.0-rc2", y use la última versión "angular-material": "1.1.3", así que, el efecto apareció, realmente es por razones de versión, déjeme llorar en el baño en silencio por un momento.

Pregunta dos:El problema de estilo se resolvió, casi está cerca del éxito. Quiero hacer un efecto de selección múltiple, porque hay muchas opciones, sin selección múltiple la experiencia es mala. Entonces uso una opción para hacer la selección completa, pero no sé qué eventos tienen las opciones, no puedo encontrar el documento de propiedades correspondiente, solo hay una propiedad checked, pero en js no sé cómo determinar si está marcado o no, al final lo dejé, hice un botón arriba, solved.

Pregunta tres:También hay un problema, es la actualización de "angular-material": "1.1.3"después de la versión, parece que md-input-Si la etiqueta del contenedor es demasiado larga, se muestra3Dot(...) se ha cambiado, mientras que antes se podía mostrar en una nueva línea, siento que esta experiencia es completamente peor que la versión anterior. Busqué en google durante mucho tiempo y no encontré beneficios para esta corrección, así que decidí personalizar el css, volviendo al estilo original.

Código relacionado:

html：

<md-input-contenedor contenedor_flecha="35" class="md-input-tiene-valor"> 
                    <etiqueta>tipo de producto</etiqueta> 
                    <md-select ng-model="params.productType" md-on-close="clearSearchTerm()" ng-change="change(params.productType)" data-md-container-class="selectHeader" multiple> 
                      <div> 
                        <botón ng-click="pTCheckNone()" class="md-botón md-tinta-ondas"><i class="zmdi zmdi-deshacer ng-scope"></i>Reset</button> 
                      </div> 
                      <md-select-header class="select"-header"> 
                        <input ng-model="searchTerm" type="search" placeholder="Search for a product.." class="header"-searchbox md-text" > 
                      </md-select-header> 
                      <md-optgroup label="productTypes"> 
                        <md-option value="{{item.key}}" ng-repeat="item in productTypes | filter:searchTerm">{{item.value}}</md-option> 
                      </md-optgroup> 
                    </md-select> 
                  </md-input-container> 

js：

$scope.productTypes = [ 
   {"key":"SecureSiteProEV"1", "value":"product"1"}, 
   {"key":"SecureSiteProEV"2", "value":"product"2"}, 
   {"key":"SecureSiteProEV"3", "value":"product"3"}, 
   {"key":"SecureSiteProEV"4", "value":"product"4"}, 
   {"key":"SecureSiteProEV"5", "value":"product"5"}; 

css

md-input-container label:not(.md-no-float):not(.md-container-ignore), 
md-input-container .md-placeholder { 
  white-space: normal; 
} 

Declaración: El contenido de este artículo se obtiene de la red, pertenece al autor original, se carga por iniciativa de los usuarios de Internet y este sitio no posee los derechos de propiedad, no se ha editado artificialmente y no asume ninguna responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)