如何动态分配max-tag值?

时间:2016-07-01 19:30:16

标签: javascript angularjs ng-tags-input

如果我指定max-tags="1",它可以正常工作,但当我尝试使用max-tags="maxtag()"动态分配时,通过链接功能,但它显示输入框的红色边框。从视图我试图把最大数量的标签。一切都很好,但输入框是红色的, 它显示如下文字图像。像警告一样。如何修复它。 enter image description here

工作演示

http://plnkr.co/edit/ooTucE4yqmLwMH9kNkO7?p=preview

<tags-input ng-model="modeldisplay" class="input-md" display-
property="data" on-tag-removed="removedCustomerTag()"
  placeholder="Select a User" on-tag-adding="addSearchedTag()" on-tag-added="tagAdded($tag)"
  enable-editing-last-tag="removedCustomerTag()" replace-spaces-with-dashes="false" max-tags="maxtag()"
  add-from-autocomplete-only="true">
  <auto-complete source="loadTags($query)" min-length="1" load-on-focus="true" load-on-empty="true" 
    max-results-to-show="10"  template="autocomplete.html">
  </auto-complete>
</tags-input>

1 个答案:

答案 0 :(得分:4)

ngTagsInput的大多数选项都只是DOM属性,因此您应该使用插值来动态更改它们:

<tags-input ng-model="modeldisplay" max-tags="{{maxtag}}" ...></tags-input>

这会奏效,但并不像人们预期的那样。为了使手表数量尽可能低,ngTagsInput默认情况下不会主动监控DOM属性,因此上面的{{maxtags}}表达式仅评估一次。在你的情况下,这似乎就足够了。但如果不是,您可以使用模块配置块中的tagsInputConfigProvider服务来更改该行为:

app.config(function(tagsInputConfigProvider) {
  tagsInputConfigProvider.setActiveInterpolation('tagsInput', { 
    maxTags: true 
  });
});

您可以在ngTagsInput documentation上了解详情。

最后,here is your updated Plunker