Development Process and Problem Analysis of Angularjs Radio Changed to Multiple Selection

A very simple requirement: The dropdown box was single-select before, and now I want to change it to multi-select.

Development process:

Question 1:At first, I thought of finding an example online, and found that AngularJS has corresponding js packages to achieve this, the most of which is isteven-multi-select and angularjs-dropdown-multiselect, etc.

I downloaded it, but it looked very ugly when I put it into my own project. Moreover, it seems that these js packages have a high degree of coupling, which is not what I want, so I still plan to use simple md-select, md-option, md-checkbox

To achieve the effect I want without making it too artificial, I searched for some AngularJS control demos, and finally found what I wanted.

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

So I started to integrate it into the project, but no matter how I integrated it, I couldn't get the style of the demo, multi-select could be multi-selected, but there was no square selection box like checkbox, searched on Baidu and Google all the time, but didn't know what the reason was. I was going to give up, but it was不忍心 give up such a good demo and such a convenient JavaScript. Besides, giving up couldn't find other suitable styles that are not obtrusive. So I took the time to look at the settings again, and everything was fine, except for the version inconsistency. Could it be? My sixth sense told me that maybe it was really due to the version. The version I used before was "angular-material": "1.0.0-rc2", and use the latest version "angular-material": "1.1.3", so the effect came out, it's really due to the version, let me silently cry in the bathroom for a while.

Question 2:The style issue is solved, and success is not far away. I want to make a multi-select effect because there are too many options, and it's not a good experience without multi-select. So I used one of the options to do a full selection, but I didn't know what events the options had, couldn't find the corresponding property description document, only a checked attribute, but I didn't know how to judge whether it was checked or not checked in JavaScript, and finally gave up. I made a button at the top and solved it.

Question 3:There is also a problem, that is, the update "angular-material": "1.1.3"After version, it seems that md-input-If the label length of the Container is too long, it will display3The Dot(...) function was used, while before it could be displayed with line breaks, and the experience felt completely worse than the previous version. I searched on Google for a long time and couldn't find any benefits of this correction, so I decided to customize the css and revert to the original style.

The following part of the code is 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; 
} 

Declaration: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any suspected copyright content, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)