Materiale angolare - Chip

Il md-chips, una direttiva angolare, viene utilizzato come componente speciale chiamato Chip e può essere utilizzato per rappresentare un piccolo insieme di informazioni, ad esempio un contatto, tag, ecc. Un modello personalizzato può essere utilizzato per rendere il contenuto di un chip. Ciò può essere ottenuto specificando un filemd-chip-template elemento avente il contenuto personalizzato come figlio di md-chips.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-chips.

Suor n Parametro e descrizione
1

* ng-model

Espressione angolare assegnabile a cui legare i dati.
2

* ng-model

Un modello a cui associare l'elenco di elementi.
3 * md-transform-chip

Un'espressione del modulo myFunction ($ chip) che quando viene chiamata si aspetta uno dei seguenti valori di ritorno:

  • un oggetto che rappresenta la stringa di input $ chip.

  • undefined per aggiungere semplicemente la stringa di input $ chip, o.

  • null per evitare che il chip venga aggiunto.
4

* md-require-match

Se true e il modello di chip contiene un completamento automatico, consente solo la selezione di chip predefiniti (cioè non è possibile aggiungerne di nuovi).
5

placeholder

Testo segnaposto che verrà inoltrato all'input.
6

secondary-placeholder

Testo segnaposto che verrà inoltrato all'input, visualizzato quando è presente almeno un elemento nell'elenco.
7

readonly

Disabilita la manipolazione dell'elenco (eliminazione o aggiunta di elementi dell'elenco), nascondendo i pulsanti di input e di eliminazione.
8

md-on-add

Un'espressione che verrà chiamata quando è stato aggiunto un chip.
9

md-on-remove

Un'espressione che verrà chiamata quando un chip è stato rimosso.
10

md-on-select

Un'espressione che verrà chiamata quando viene selezionato un chip.
11

delete-hint

Una stringa letta dalle utilità per la lettura dello schermo che informa gli utenti che premendo il tasto Canc rimuoverà il chip.
12

delete-button-label

Un'etichetta per il Deletepulsante. Nascosto e letto anche dagli screen reader.
13

md-separator-keys

Una matrice di codici chiave utilizzati per separare i chip.

Esempio

L'esempio seguente mostra l'uso di md-chips direttiva e anche l'uso di chip angolari.

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>

Risultato

Verifica il risultato.