English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Angularjsでの单选ボックスを多选ボックスに変更する開発プロセス及び問題解決

とても単純な要求：以前のドロップダウンは単選だったが、今は複数選択に変更したい。

開発プロセス：

問題一：まず思ったのは、オンラインでexampleを見つけること。AngularJSには対応するjsパッケージがあると知り、その中で最も多いのがistevenだった。-multi-selectとangularjs-dropdown-multiselectなど。

ダウンロードはしたけど、自分のプロジェクトに組み込んだら、とても見た目が悪い。これらのjsパッケージは高く結合されているようで、私たちが望むものではないので、シンプルなmdを使うことにした。-select、md-option、md-checkbox

私たちが望む効果を実現したいけど、手作り感を避けたいので、angularjsの一部のコントロールのdemoを探してみた。結局、望んでいたものを見つけた。

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

プロジェクトに適用し始めましたが、どのように適用するかわかりませんでした。デモのスタイルが出ませんでした。マルチ選択はできますが、checkboxのような正方形の選択ボックスはありません。百度やgoogleで色々と調べましたが、原因がわかりませんでした。最初は諦めようと思いましたが、このデモは非常に良いもので、このjsは非常に便利で、諦めたくありませんでした。さらに、諦めれば他の適切で目立たないスタイルを見つけることもできません。したがって、settingを何度も何度も見直し、すべてが問題ありませんでしたが、バージョンが一致していませんでした。それとも？私の第六感が言っているように、本当にバージョンの問題かもしれません。以前のバージョンは"angular-material": "1.0.0-rc2"、最新バージョンの"angular-material": "1.1.3"、その結果、効果が現れました。本当にバージョンの問題でした。私が少し泣く時間を設けます。

問題二：スタイルの問題が解決したので、成功に近づいています。多くのオプションがあるため、マルチ選択効果を作成したいと思いました。体験が良くないため、オプションの1つを使用して全選択を行いましたが、オプションが何のイベントを持っているか、対応する属性の説明文書を見つけることができませんでした。checked属性しかありませんが、js内でcheckedが有効かどうかを判断する方法がわかりませんでした。最終的には、諦めました。一番上にボタンを作成して解決しました。

問題三：もう一つの問題は、"angular-material": "1.1.3"バージョン以降、md-input-Container label長さが長い場合、以下のように表示します3Dot(...)了，而之前是可以换行显示的，感觉这个体验完全不如之前版本的体验。网上google了好久也没google出来这样修正的好处，于是果断自定义css，改回原来的样式。

涉及到的部分代码：

html：

<md-input-container flex="35" class="md-input-has-value"> 
                    <label>产品类型</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>リセット</button> 
                      </div> 
                      <md-select-header class="select"-header"> 
                        <input ng-model="searchTerm" type="search" placeholder="製品を検索する.." 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":"SecureSiteProEV"1", "value":"product"1"}, 
   {"key":"SecureSiteProEV"2", "value":"product"2"}, 
   {"key":"SecureSiteProEV"3", "value":"product"3"}, 
   {"key":"SecureSiteProEV"4", "value":"product"4"}, 
   {"key":"SecureSiteProEV"5", "value":"product"5"}];

css

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

声明：この記事の内容はインターネットから取得しており、著作権者はすべて所有しています。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害を疑う内容があれば、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは侵害疑いのコンテンツをすぐに削除します。)

基本教程
おすすめ