A very simple requirement: the drop-down box was a single choice before, but now I want to change it to multiple choice.
Development process:
Question 1:The first thing I thought of was to find an example online and found that it seemedAngularJSThere are corresponding js packages to implement, the most of which areisteven-multi-selectandangularjs-dropdown-multiselectwait.
I downloaded it, but it was ugly when I put it in my project. And it seems that these js packages are very coupled, not the kind I want, so I plan to use simple md-select, md-option, and md-checkbox.
To achieve the effect I want, I don’t want to write it too artificially, so I checked some control demos of angularjs, and finally found what I want.
/1.1.3/demo/select
So I started to get involved in the project，But how to get it，Can't even get outdemoStyle on，Multiple choices can be selected，But no likecheckboxThat square selection box，Various Baidu variousgoogle，I just don't know why。 I originally planned to give up, but such a good demo and such a trouble-free js, I can't bear to give up. Besides, I can't find other more suitable styles that don't look abrupt. So I patiently went to check the settings over and over again, and everything was fine, except that the version was inconsistent. Could it be? My sixth sense tells me that maybe it is really the reason for the version. The version I used before was "angular-material": "1.0.0-rc2", and used the latest version "angular-material": "1.1.3", so the effect came out, it was really the reason for the version, so I let me cry in the bathroom for a while.
Question 2:The style problem has been solved and is not far from success. I want to make a multi-choice effect because there are so many options, and it is really not a good experience without multi-choice. So I used one of the options to select all, but I didn't know what events the option had, and I couldn't find the corresponding attribute description document. There was only one checked attribute. However, I didn't know how to judge whether checked or not checked in js. In the end, I gave up and made a button on the top to get it done.
Question 3:Another problem is that after updating the "angular-material": "1.1.3", it seems that if the md-input-Container label is too long, it will display 3Dot(...). It can be displayed in a new line before, and it feels that this experience is not as good as the previous version. I have been googling online for a long time but haven't had the benefit of Google making this correction, so I decisively customized the css and changed it back to the original style.
Some codes involved:
html：
<md-input-container flex="35" class="md-input-has-value">
<label>Product Type</label>
<md-select ng-model="" md-on-close="clearSearchTerm()" ng-change="change()" 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>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="{{}}" ng-repeat="item in productTypes | filter:searchTerm">{{}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
js：
$ = [
{"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: normal;
}