how to add custom md-chips in addition to existing md-chips?

Question

I have designed elements using angular material design . i have used md-chips for rendering skills data as bellow

        <md-chips ng-model="user.skills"
                  readonly="readonly"
                  placeholder="Enter another skill"
                  delete-button-label="Remove Skill"
                  delete-hint="Press delete to remove skill"
                  secondary-placeholder="Enter a Skill">
            <md-chip-template>{{$chip.skill_title}}</md-chip-template>
        </md-chips>

In that i have used the user_skills variable to load existing skills.it's loading as i have expected. i need to give the option to add new chips from this . but here when i write skill and enter it'l become empty chip like bellow image.

how to solve it??advanced thanks..

Answer 1

You need to write a function to set 'skill_title'

VIEW

<div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak="" ng-app="MyApp">
  <md-content class="md-padding" layout="column">
    <md-chips ng-model="ctrl.skills" readonly="ctrl.readonly" md-transform-chip="ctrl.newSkill($chip)">
      <md-chip-template>
        <span>
          <strong>{{$chip.skill_title}}</strong>
        </span>
      </md-chip-template>
    </md-chips>
  </md-content>
</div>

Controller

(function () {
      'use strict';
      angular
          .module('MyApp')
          .controller('BasicDemoCtrl', DemoCtrl);
      function DemoCtrl ($timeout, $q) {
        var self = this;

    self.skills = [
      {
        'skill_title' : 'Angular'
      },
      {
        'skill_title' : 'Material'
      },
      {
        'skill_title' : 'C#'
      }
    ];

    self.newSkill = function(chip) {
      return {
        skill_title: chip
      };
    };
  }
})();

Take a look at this working example.

http://codepen.io/mattspaulding/pen/xZGQyE