Question

我正在以角度工作，我创建了一个自动完成标签框。它的工作完美但要求是，用户只能选择一个标签，但在我的情况下，多个标签正在被选中。我的代码如下。

 <div>
         <tags-input ng-model="tags" display-property="name">

         <auto-complete source="loadTags($query)" placeholder="Start typing"  min-length="0" debounce-delay="0"></auto-complete>

         </tags-input>

         <p>Model: {{tags}}</p>

        <button class="Button" ng-click="GetAllProjectByKeyId(searchKeyword.key)">Search</button>
    </div>

Answer 1

在文档页面上：http://mbenford.github.io/ngTagsInput/documentation/api

您可以看到可以设置max-tags属性：

<tags-input ng-model="tags" display-property="name" max-tags="1">

Answer 2

对不起，这个答案迟了一年。我也遇到了同样的问题，并提出了以下解决方案。

您可以像这样使用onTagAdding配置:(返回false以防止添加标记）

<tags-input ng-model="tags" display-property="name" max-tags="1" on-tag-adding="forceOneTag(tags)">

在控制器中，将forceOneTag定义为：

function forceOneTag(tags) {
    return (tags.length === 0);
}

我假设你已经找到了解决方案，但希望这会帮助其他人遇到同样的问题！

Answer 3

我接近它的方式运行良好，将on-tag-added和on-tag-removed属性添加到指令中，并在tags-input的子输入元素上删除/添加readonly和placeholder属性。

var tagsAddedCount = <initial number of tags>;
var maxTags = <some number>;
var element = jQuery("tags-input"); //update using the control id
scope.onTagAdded = function(tag) {
   ++tagsAddedCount;
   if (!tagsAddedCount >= maxTags) {
        element.find("input").attr("readonly", "readonly");
        element.find("input").attr("placeholder", "");
   }
}
scope.onTagRemoved = function(tag) {
    --tagsAddedCount;
    if (tagsAddedCount < maxTags) {
        element.find("input").removeAttr("readonly");
        element.find("input").attr("placeholder", "Add a tag");
    }
}

Answer 4

A slightly simpler solution:

<tags-input ng-model="tags" display-property="name" max-tags="1" ng-class="{'hide-input': tags.length > 0}"></tags-input>

Then add some custom CSS:

tags-input.hide-input .tags input.input{
  display: none ;
}

This should hide the input box until the added tag is removes.

在angularJS中只允许标记输入框中的一个标记

4 个答案: