Chips

优质
小牛编辑
137浏览
2023-12-01

md-chips是一个Angular Directive,用作称为Chip的特殊组件,可用于表示一小组信息,例如联系人,标签等。自定义模板可用于呈现芯片的内容。 这可以通过指定具有定制内容作为md-chips子代的md- md-chip-template元素来实现。

属性 (Attributes)

下表列出了md-chips的不同属性的参数和描述。

Sr.No参数和描述
1

* ng-model

可分配的角度表达式以数据绑定到。

2

* ng-model

用于将项列表绑定到的模型。

3* md-transform-chip

形式为myFunction($ chip)的表达式,在调用时需要以下返回值之一 -

  • 表示$ chip输入字符串的对象。

  • undefined只需添加$ chip输入字符串,或。

  • null以防止附加芯片。

4

* md-require-match

如果为true,并且芯片模板包含自动完成,则只允许选择预定义的芯片(即您不能添加新的芯片)。

5

placeholder

将转发到输入的占位符文本。

6

secondary-placeholder

将转发到输入的占位符文本,当列表中至少有一个项目时显示。

7

readonly

禁用列表操作(删除或添加列表项),隐藏输入和删除按钮。

8

md-on-add

添加芯片时将调用的表达式。

9

md-on-remove

移除芯片时将调用的表达式。

10

md-on-select

选择芯片时将调用的表达式。

11

delete-hint

屏幕阅读器读取的字符串指示用户按下删除键将删除芯片。

12

delete-button-label

Delete按钮的标签。 也被屏幕阅读器隐藏和阅读。

13

md-separator-keys

用于分离芯片的一系列密钥代码。

例子 (Example)

以下示例显示了md-chips指令的使用以及角度芯片的使用。

am_chips.htm

<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>