Processo di sviluppo e risoluzione dei problemi di selezione singola a multipla in Angularjs

Richiesta molto semplice: prima c'era un menu a discesa con una singola selezione, ora voglio cambiarlo in una selezione multipla.

Processo di sviluppo:

Problema 1:Prima ho pensato a cercare un esempio su internet, ho scoperto che AngularJS ha dei pacchetti JavaScript corrispondenti, tra cui i più comuni sono isteven-multi-select e angularjs-dropdown-multiselect.

L'ho scaricato, ma quando l'ho inserito nel mio progetto, era davvero orribile. E sembrava che questi pacchetti JavaScript avessero una alta coesione, non erano quelli che volevo, quindi ho deciso di usare md-select, md-option, md-checkbox semplici.

Per ottenere l'effetto desiderato, senza scrivere troppo in modo artificiale, ho cercato在一些angularjs的一些控件demo，最终果然找到了我想要的。

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

Così ho iniziato a inserire il progetto, ma non riuscivo a ottenere lo stile del demo, anche se era possibile selezionare più opzioni, mancava la casella di selezione quadrata come quella dei checkbox. Ho cercato su Baidu e Google, ma non sapevo la ragione. Pianavo di abbandonare tutto, ma non potevo resistere a questo ottimo demo e a questo JavaScript così comodo. Inoltre, anche se avessi abbandonato, non avrei trovato altri stili adeguati e non troppo appariscenti. Così, con pazienza, ho guardato setting una volta dopo l'altra, e tutto sembrava a posto, tranne per la versione non coincidente. Forse? Il mio sesto senso mi diceva che forse era davvero la versione a creare il problema. Prima usavo la versione "angular-material": "1.0.0-rc2", poi ho provato con l'ultima versione "angular-material": "1.1.3", e finalmente, l'effetto è apparso, è davvero la versione che causava il problema. Mi permetto di piangere un po' in silenzio in bagno.

Problema due：Il problema di stile è risolto, non ci resta molto per il successo. Volevo fare un effetto di selezione multipla, perché ci sono molti opzioni e senza selezione multipla l'esperienza è pessima. Quindi ho usato uno degli option per fare una selezione di tutti, ma non sapevo quali eventi avevano gli option, non trovavo la documentazione delle proprietà corrispondenti, c'era solo l'attributo checked, ma non sapevo come determinare se era checked o non checked, alla fine ho abbandonato, ho fatto un pulsante in alto e ho risolto.

Problema tre：C'è un problema, ossia dopo l'aggiornamento della versione "angular-material": "1.1.3", sembra che se la lunghezza del label di md-input-Container è troppo lunga, viene visualizzato 3Dot(...), mentre prima era possibile visualizzare su più righe, il che sembra molto peggiore dell'esperienza della versione precedente. Ho cercato su google per molto tempo e non ho trovato alcun vantaggio di questa correzione, quindi ho deciso di personalizzare il css e di tornare allo stile originale.

Codice coinvolto：

html：

<md-input-container flex="35" class="md-input-has-value"> 
                    <label>Tipo di prodotto</label> 
                    <md-select ng-model="params.productType" md-on-close="clearSearchTerm()" ng-change="change(params.productType)" data-md-container-class="selectHeader" multiple> 
                      <div> 
                        <button ng-click="pTCheckNone()" class="md-button md-ink-ripple"><i class="zmdi zmdi-undo ng-scope"></i>Ripristina</button> 
                      </div> 
                      <md-select-header class="select-header"> 
                        <input ng-model="searchTerm" type="search" placeholder="Cerca un prodotto.." 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":"SecureSiteProEV1", "value":"product1"}, 
   [{"key":"SecureSiteProEV2", "value":"product2"}, 
   [{"key":"SecureSiteProEV3", "value":"product3"}, 
   [{"key":"SecureSiteProEV4", "value":"product4"}, 
   [{"key":"SecureSiteProEV5", "value":"product5"}]; 

css

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

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi proprietari. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, invia un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.