как добавить пользовательские md-чипы в дополнение к существующим md-чипам?

Я разработал элементы, используя дизайн угловых материалов. Я использовал 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 для загрузки существующих навыков. Она загружается, как я и ожидал. мне нужно дать возможность добавить новые чипы из этого. но здесь, когда я пишу навык и ввожу его, он становится пустым чипом, как показано ниже.

введите здесь описание изображения

как это решить??заранее спасибо..


material-design angularjs angular-material md-chip angularjs-ng-model
person user3391137    schedule 08.12.2015    source источник
comment
Какую версию АМ вы используете?   -  person Chris Hermut    schedule 08.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно написать функцию для установки '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

person Matt    schedule 10.12.2015