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

Question

我使用 angular material design 设计了元素。我已经使用 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