Material Angular - Chips

o md-chips, uma diretiva angular, é usado como um componente especial chamado Chip e pode ser usado para representar um pequeno conjunto de informações, por exemplo, um contato, tags, etc. Um modelo personalizado pode ser usado para renderizar o conteúdo de um chip. Isso pode ser alcançado especificando ummd-chip-template elemento que tem o conteúdo personalizado como filho de chips MD.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-chips.

Sr. Não	Parâmetro e Descrição
1	* ng-model Expressão angular atribuível para vinculação de dados.
2	* ng-model Um modelo para vincular a lista de itens.
3	* md-transform-chip Uma expressão no formato myFunction ($ chip) que, quando chamada, espera um dos seguintes valores de retorno - um objeto que representa a string de entrada $ chip. undefined para simplesmente adicionar a string de entrada $ chip ou. null para evitar que o chip seja anexado.
4	* md-require-match Se verdadeiro, e o modelo de chips contém um autocompletar, permite apenas a seleção de chips predefinidos (ou seja, você não pode adicionar novos).
5	placeholder Texto de espaço reservado que será encaminhado para a entrada.
6	secondary-placeholder Texto de espaço reservado que será encaminhado para a entrada, exibido quando houver pelo menos um item na lista.
7	readonly Desativa a manipulação de lista (exclusão ou adição de itens de lista), ocultando a entrada e os botões de exclusão.
8	md-on-add Uma expressão que será chamada quando um chip for adicionado.
9	md-on-remove Uma expressão que será chamada quando um chip for removido.
10	md-on-select Uma expressão que será chamada quando um chip for selecionado.
11	delete-hint Uma string lida por leitores de tela instruindo os usuários que pressionar a tecla delete removerá o chip.
12	delete-button-label Um rótulo para o Deletebotão. Também oculto e lido por leitores de tela.
13	md-separator-keys Uma série de códigos-chave usados para separar chips.

Exemplo

O exemplo a seguir mostra o uso do md-chips diretiva e também o uso de chips angulares.

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>

Resultado

Verifique o resultado.

↰ Previous page