角材-チップ

Angular Directiveである md-chips は、Chipという特別なコンポーネントとして使用され、連絡先、タグなどの小さな情報セットを表すために使用できます。カスタムテンプレートを使用して、チップのコンテンツをレンダリングできます。これは、カスタムコンテンツを含む md-chip-template 要素をmd-chipsの子として指定することで実現できます。

属性

次の表に、 md-chips のさまざまな属性のパラメーターと説明を示します。

Sr.No	Parameter & Description
1	ng-model* データバインド先に割り当て可能な角度式。
2	ng-model* アイテムのリストをバインドするモデル。
3	md-transform-chip* 呼び出されたときに次の戻り値のいずれかを期待するmyFunction（$ chip）形式の式- $ chip入力文字列を表すオブジェクト。未定義で、単に$ chip入力文字列を追加するか、または。チップが追加されないようにするにはnull。
4	md-require-match* trueで、チップテンプレートにオートコンプリートが含まれている場合、事前定義されたチップ（つまり、新しいものを追加することはできません）。
5	placeholder 入力に転送されるプレースホルダーテキスト。
6	secondary-placeholder リストに少なくとも1つのアイテムがある場合に表示される、入力に転送されるプレースホルダーテキスト。
7	readonly リスト操作（リスト項目の削除または追加）を無効にし、入力ボタンと削除ボタンを非表示にします。
8	md-on-add チップが追加されたときに呼び出される式。
9	md-on-remove チップが削除されたときに呼び出される式。
10	md-on-select チップが選択されたときに呼び出される式。
11	delete-hint 削除キーを押すとチップが削除されることをユーザーに指示するスクリーンリーダーによって読み取られた文字列。
12	delete-button-label 削除*ボタンのラベル。また、スクリーンリーダーによって非表示にされ、読み取られます。
13	md-separator-keys チップの分離に使用されるキーコードの配列。

例

次の例は、 md-chips ディレクティブの使用と角型チップの使用を示しています。

*_am_chips_*

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <style>
         .closeButton {
            position: relative;
            height: 24px;
            width: 24px;
            line-height: 30px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            border: none;
            box-shadow: none;
            padding: 0;
            margin: 3px;
            transition: background 0.15s linear;
            display: block;
         }
      </style>

      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('chipController', chipController);

         function chipController ($scope) {
            var self = this;
            self.readonly = false;

           //Lists of fruit names and Vegetable objects
            self.fruitNames = ['Apple', 'Banana', 'Orange'];
            self.roFruitNames = angular.copy(self.fruitNames);
            self.tags = [];

            self.vegObjs = [
               {
                  'name' : 'Broccoli',
                  'type' : 'Brassica'
               },
               {
                  'name' : 'Cabbage',
                  'type' : 'Brassica'
               },
               {
                  'name' : 'Carrot',
                  'type' : 'Umbelliferous'
               }
            ];

            self.newVeg = function(chip) {
               return {
                  name: chip,
                  type: 'unknown'
               };
            };
         }
      </script>
   </head>

   <body ng-app = "firstApplication">
      <div ng-controller = "chipController as ctrl" layout = "column" ng-cloak>
         <md-chips ng-model = "ctrl.fruitNames" readonly = "ctrl.readonly">
            </md-chips>

         <md-chips class = "custom-chips" ng-model = "ctrl.vegObjs"
            readonly = "ctrl.readonly" md-transform-chip = "ctrl.newVeg($chip)">
            <md-chip-template>
               <span>
                  <strong>[{{$index}}] {{$chip.name}}</strong>
                  <em>({{$chip.type}})</em>
               </span>
            </md-chip-template>

            <button md-chip-remove class = "md-primary closeButton">
               <md-icon md-svg-icon = "md-close"></md-icon>
            </button>
         </md-chips>

         <br/>
         <md-checkbox ng-model = "ctrl.readonly">Readonly</md-checkbox>
      </div>
   </body>
</html>

結果

結果を確認します。

Angular-material-chips

目次

角材-チップ

属性

例

結果