ng-tags-input与自动完成功能无法正常工作

Question

我通过从列表中选择添加标记（使用$ http请求填充）。标签已添加，但我输入的文本仍保留在ng-invalid-tag类中。

截图 1）最初，

2）输入3个字母以获取HTTP呼叫。

3）现在选择了第一个技能“Angular Js”。

4）它显示.input.invalid-tag已启用。并没有清除占位符。

我的输入标记如下。

<tags-input ng-model="employerMyCandidatesCtrl.skillList" placeholder="Skills..."
    replace-spaces-with-dashes="false"
    add-from-autocomplete-only="true"
    display-property="skillName"
    on-tag-added="employerMyCandidatesCtrl.addTagToSkillData($tag)"
    on-tag-removed="employerMyCandidatesCtrl.removeTagFromSkillData($tag)">
  <auto-complete
    source="employerMyCandidatesCtrl.loadSkillData($query)"
    displayProperty="skillName" debounce-delay="500"
    min-length="3">
  </auto-complete>
</tags-input>

控制器代码如下。

vm.skillList = [];
vm.loadSkillData = function(query) {
  return EmployerServices.getAllSkillsPromise(query); // $http call.
};

vm.addTagToSkillData = function(tag) {
  if (_.findIndex(vm.skillList, tag) < 0) {
    vm.skillList.push(tag);
  }
};

vm.removeTagFromSkillData = function(tag) {
  var ind = _.findIndex(vm.skillList, tag) > -1 ? vm.skillList.splice(ind, 1) : '';
};

我正在做任何配置错误吗？

Answer 1

Results<Example>有4个属性，因此以添加结尾的属性与以添加结尾的属性之间的基本差异是

onTagAdding, onTagAdded, onTagRemoving, onTagRemoved

但是onTagAdded / Removed已经添加了标签，在调用函数之前因此我们可以做一些额外的逻辑，或者去除添加值的ng-model或者添加删除的值（不是很容易）。

检查下面的JSFiddle以查看行动here

中的四个属性

我已经提供了自定义服务来提供数据，因此您问题的最终答案是根据您的用例使用适当的属性（Adding suffixed tags are expecting a boolean which when true will be added or removed based on the tag used. ）。从上面的代码中，我认为我们无需自动完成onTagAdding, onTagAdded, onTagRemoving, onTagRemoved。