除现有的md芯片外，如何添加自定义md-chips？

Question

我使用角度材料设计设计了元素。我使用md-chips渲染技能数据如下所示

        <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>

因为我已经使用 user_skills 变量来加载现有技能。正如我所期望的那样加载。我需要提供从中添加新芯片的选项。但是在这里，当我写技巧并输入它时，我会变成像空洞图像一样的空芯片。

如何解决？高级谢谢..

Answer 1

您需要编写一个函数来设置'skill_title'

查看

<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>

<强>控制器

(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
      };
    };
  }
})();

看看这个工作示例。

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