Development Process and Problem Analysis of Angularjs Changing Single Choice to Multiple Choice

Very simple requirement: Before the drop-down box was single choice, now I want to change it to multiple choice.

Development process:

Question 1: My first thought is to find an example online and find it looks like AngularJS There are corresponding js packages to implement, and the most of them are isteven-multi-select And angularjs-dropdown-multiselect Wait.

I downloaded it, but it was ugly to put it in my own project. And it seems that these js packets are highly coupled and not the kind I want, so I'm going to use simple md-select, md-option, md-checkbox

To achieve the effect I want, and do not want to write too artificial, so I looked up angularjs control demo, and finally found what I want.

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

So I started to put it into the project, but I couldn't get the style on demo. Multiple choices can be made, but there is no square selection box like checkbox, and all kinds of Baidu google just don't know why. I was going to give up, but such a good demo and such a convenient js can't bear to give up. Besides, I can't find other suitable and unobtrusive styles when I give up. So bear the heart to see setting over and over again, all of them are no problem, except version is not 1. Is it? My sixth sense tells me that maybe it is really the version reason. The previous version was "angular-material": "1.0. 0-rc2", and the latest version "angular-material": "1.1. 3" was used instead, so the effect came out, which was really the reason for the version. Let me cry silently in the bathroom for a while.

Question 2: The problem of style has been solved, and it is not far from success. I want to make a multi-choice effect, because there are so many options, and it is really bad to experience without multi-choice. So I used one of option to do all the selection, but I don't know what events option has, and 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 doesn't have checked in js, and finally I gave up. I made a button on the top and got it done.

Question 3: There is another problem, that is, after updating "angular-material": "1.1. 3", if it seems that md-input-Container label is too long, 3Dot (...) will be displayed, but it can be displayed in new lines before, so I feel that this experience is completely inferior to that of the previous version. Online google for a long time also did not google out of the benefits of such correction, so decisively customize css, change 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> 

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: normal; 
}