我使用角度材料设计设计了元素。我使用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变量来加载现有技能。正如我所期望的那样加载。我需要提供从中添加新芯片的选项。但是在这里,当我写技巧并进入它时,它变成了像贝娄图像那样的空芯片。
怎么解决呢?高级谢谢..
你需要写一个函数来设置'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
};
};
}
})();
看看这个工作示例。