web-dev-qa-db-ja.com

角材に複数選択オプションを実装するにはどうすればよいですか？

私はドキュメントとデモをチェックしましたが、悲しいかな!!角材を使用したselect 2のような複数選択オプションの実装に関するリファレンスは見つかりませんでした。誰でもそれを機能させる方法を教えてもらえますか？

angularjsmaterial-designangular-material
21
John Maclein

Splaktarの答えは正しい：multipleをmd-selectに追加するだけです。

実用的なソリューションのCodepen： http://codepen.io/ansgar-john/pen/RWPVEO?editors=101

HTML

<div>
  <md-input-container>
    <md-select multiple ng-model="ctrl.likedAnimals" placeholder="please select">
      <md-option ng-repeat="a in ctrl.animals" value="{{a}}">{{a}}</md-option>
    </md-select>
  </md-input-container>
</div>

JS

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', function($scope) {
        this.likedAnimals = ["mouse", "dog"];
        this.animals = ["mouse", "dog", "cat", "bird"];
  });
})();

スタックオーバーフローの答えに基づくコード： アンギュラーマテリアルに複数の選択オプションを実装する方法は？

26
Ansgar

ディレクティブ here のドキュメントを見ることができます。

属性

multiple（オプション）：boolean-複数かどうか。

<md-select ng-model="someModel" placeholder="Select a state" multiple="true">
    <md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt }}</md-option>
</md-select>

これが機能しない場合、md-multipleは動作する可能性がありますが、ドキュメントはまだ更新されていません。まだこれを確認できませんでした。

7
Splaktar

チェックアウト チップ

独自のカスタムテンプレートも適用できます。

5
Joe

以下を使用して、ng-repeatを複数のmd-selectと一緒に使用したり、いくつかのmd-selectを使用したりすることができました（Angular 1.4.7））：

index.html

<md-input-container ng-repeat="item in items track by $index">
        <label>{{item.title}}</label>
            <div ng-include="item.multiselect == 'true' ? 'm_selectfragment.html' : 's_selectfragment.html'"></div>
   </md-input-container>

Javascript

$scope.items = 
        [{title: 'funny',
        selected: '', 
        names: [
            {name: 'some name'}, 
            {name: 'other name'},
            {name: 'more?'}, 
            {name: 'say wha???'}             
            ],
         multiselect: "false"   
        }, 
        {title: 'serious', 
        selected: '', 
        names: [
           {name: 'Obama'},
        {name: 'Trump'},
        {name: 'Hillary'},
        {name: 'Putin'}               
            ],
         multiselect: "true"   
        }];

m_selectfragment.html

<md-select name="item.title" ng-model="item.selected" multiple="true">
<md-option ng-repeat="name in item.names" value="{{name.name}}">{{name.name}}
</md-option>

s_selectfragment.html

<md-select name="item.title" ng-model="item.selected">
<md-option ng-repeat="name in item.names" value="{{name.name}}">{{name.name}}
</md-option>
0
Helzgate