Angular Material - Chips

The md-chips, an Angular Directive, is used as a special component called Chip and can be used to represent a small set of information for example, a contact, tags etc. A custom template can be used to render the content of a chip. This can be achieved by specifying an md-chip-template element having the custom content as a child of md-chips.
The following table lists out the parameters and description of the different attributes of md-chips.
* ng-model
Assignable angular expression to data-bind to.
* ng-model
A model to bind the list of items to.
An expression of form myFunction($chip) that when called expects one of the following return values −
an object representing the $chip input string.
an object representing the $chip input string.
undefined to simply add the $chip input string, or.
undefined to simply add the $chip input string, or.
null to prevent the chip from being appended.
null to prevent the chip from being appended.
* md-require-match
If true, and the chips template contains an autocomplete, only allows selection of pre-defined chips (i.e. you cannot add new ones).
placeholder
Placeholder text that will be forwarded to the input.
secondary-placeholder
Placeholder text that will be forwarded to the input, displayed when there is at least one item in the list.
readonly
Disables list manipulation (deleting or adding list items), hiding the input and the delete buttons.
md-on-add
An expression which will be called when a chip has been added.
md-on-remove
An expression which will be called when a chip has been removed.
md-on-select
An expression which will be called when a chip is selected.
delete-hint
A string read by screen readers instructing users that pressing the delete key will remove the chip.
delete-button-label
A label for the Delete button. Also hidden and read by screen readers.
md-separator-keys
An array of key codes used to separate chips.
The following example shows the use of the md-chips directive and also the use of angular 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>
Verify the result.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page