Matériau angulaire - copeaux

le md-chips, une directive angulaire, est utilisé comme composant spécial appelé Chip et peut être utilisé pour représenter un petit ensemble d'informations, par exemple, un contact, des balises, etc. Un modèle personnalisé peut être utilisé pour rendre le contenu d'une puce. Ceci peut être réalisé en spécifiant unmd-chip-template élément ayant le contenu personnalisé en tant qu'enfant de md-chips.

Les attributs

Le tableau suivant répertorie les paramètres et la description des différents attributs de md-chips.

Sr. Non Paramètre et description
1

* ng-model

Expression angulaire attribuable à laquelle lier les données.
2

* ng-model

Un modèle auquel lier la liste des éléments.
3 * md-transform-chip

Une expression de la forme myFunction ($ chip) qui, lorsqu'elle est appelée, attend l'une des valeurs de retour suivantes -

  • un objet représentant la chaîne d'entrée $ chip.

  • undefined pour ajouter simplement la chaîne d'entrée $ chip, ou.

  • null pour empêcher l'ajout de la puce.
4

* md-require-match

Si la valeur est true et que le modèle de puces contient une saisie semi-automatique, permet uniquement la sélection de puces prédéfinies (c'est-à-dire que vous ne pouvez pas en ajouter de nouvelles).
5

placeholder

Texte d'espace réservé qui sera transmis à l'entrée.
6

secondary-placeholder

Texte d'espace réservé qui sera transmis à l'entrée, affiché lorsqu'il y a au moins un élément dans la liste.
sept

readonly

Désactive la manipulation de liste (suppression ou ajout d'éléments de liste), masquant l'entrée et les boutons de suppression.
8

md-on-add

Une expression qui sera appelée lors de l'ajout d'une puce.
9

md-on-remove

Une expression qui sera appelée lorsqu'une puce a été supprimée.
dix

md-on-select

Une expression qui sera appelée lorsqu'un jeton est sélectionné.
11

delete-hint

Une chaîne lue par les lecteurs d'écran indiquant aux utilisateurs que le fait d'appuyer sur la touche de suppression supprimera la puce.
12

delete-button-label

Un label pour le Deletebouton. Egalement caché et lu par les lecteurs d'écran.
13

md-separator-keys

Un tableau de codes clés utilisés pour séparer les puces.

Exemple

L'exemple suivant montre l'utilisation du md-chips directive et aussi l'utilisation de puces angulaires.

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>

Résultat

Vérifiez le résultat.