Material angular: virutas

los md-chips, una directiva angular, se utiliza como un componente especial llamado Chip y se puede utilizar para representar un pequeño conjunto de información, por ejemplo, un contacto, etiquetas, etc. Se puede utilizar una plantilla personalizada para representar el contenido de un chip. Esto se puede lograr especificando unmd-chip-template elemento que tiene el contenido personalizado como hijo de md-chips.

Atributos

La siguiente tabla enumera los parámetros y la descripción de los diferentes atributos de md-chips.

No Señor	Descripción de parámetros
1	* ng-model Expresión angular asignable a la que enlazar datos.
2	* ng-model Un modelo al que enlazar la lista de elementos.
3	* md-transform-chip Una expresión de la forma myFunction ($ chip) que cuando se llama espera uno de los siguientes valores de retorno: un objeto que representa la cadena de entrada $ chip. undefined para agregar simplemente la cadena de entrada $ chip, o. null para evitar que se agregue el chip.
4	* md-require-match Si es verdadero, y la plantilla de chips contiene un autocompletado, solo permite la selección de chips predefinidos (es decir, no puede agregar nuevos).
5	placeholder Texto de marcador de posición que se reenviará a la entrada.
6	secondary-placeholder Texto de marcador de posición que se reenviará a la entrada, que se muestra cuando hay al menos un elemento en la lista.
7	readonly Deshabilita la manipulación de la lista (eliminar o agregar elementos de la lista), ocultando la entrada y los botones de eliminación.
8	md-on-add Una expresión que se llamará cuando se agregue un chip.
9	md-on-remove Una expresión que se llamará cuando se haya eliminado un chip.
10	md-on-select Una expresión que se llamará cuando se seleccione una ficha.
11	delete-hint Una cadena leída por lectores de pantalla que indica a los usuarios que al presionar la tecla Eliminar se eliminará el chip.
12	delete-button-label Una etiqueta para el Deletebotón. También oculto y leído por lectores de pantalla.
13	md-separator-keys Matriz de códigos clave que se utilizan para separar chips.

Ejemplo

El siguiente ejemplo muestra el uso del md-chips directiva y también el 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 el resultado.

↰ Previous page