Simple requirement: The drop-down box used to be radio, but now it wants to be multiple.

Development process:

Question 1: The first thing I want to think about is to find an example on the Internet and find that angular JS seems to have corresponding JS packages to implement, the most of which are isteven-multi-select and angular js-dropdown-multi select.

I downloaded it, but when it comes to my project, it's ugly. And it seems that these js packages are highly coupled, not what I want, so I'm going to use simple md-select, md-option, md-checkbox.

To achieve the desired effect, but do not want to write too manual, so check some of the angular JS control demo, and finally found what I want.

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

So I started to set it in the project, but no way out of the demo style, multi-choice is multi-choice, but there is no square selection box like checkbox, Baidu all kinds of google, that is, I do not know why. Originally planned to give up, but such a good demo, such an easy js, can not bear to give up ah, and give up can not find other more appropriate and not obtrusive style. So take the patience to look at the setting s over and over again. Everything is OK except for the inconsistent versions. Do you? My sixth sense tells me that maybe it's the version. The previous version was "angular-material": "1.0.0-rc2", instead of the latest version of "angular-material": "1.1.3", the effect came out, really is the reason for the version, let me cry silently in the bathroom for a while.

Problem 2: The problem of style has been solved, and it is not far from success. Want to do a multi-choice effect, because there are so many options, no multi-choice is really bad experience. So I use one of the options to do the whole selection, but I don't know what happens to the option, I can't find the corresponding attribute description document, there is only one checked attribute, but I don't know how to judge whether checked or not in js. Finally, I give up and make a button at the top.

Question 3: Another problem is that after updating the "angular-material": "1.1.3" version, it seems that if the length of md-input-container label is too long, it will display the 3D ot (...), which can be displayed in a new line before, feeling that the experience is totally inferior to the previous version. For a long time, google did not come out with the benefits of such a revision, so decided to customize the css, back to the original style.

Part of the code involved:

html:

<md-input-container flex="35" class="md-input-has-value">
                                        <label>product type</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>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>

$scope.productTypes = [
      {"key":"SecureSiteProEV1", "value":"product1"},
      {"key":"SecureSiteProEV2", "value":"product2"},
      {"key":"SecureSiteProEV3", "value":"product3"},
      {"key":"SecureSiteProEV4", "value":"product4"},
      {"key":"SecureSiteProEV5", "value":"product5"}];

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