CODEWITHSUNDEEP
javascriptangularjsng-tags-input
Guest
Guest

Reputation: 515

How to assign max-tag value dynamically?

If I assign max-tags="1", it working perfectly but when I tried to assign dynamically by using max-tags="maxtag()",through link function, but it is showing red border for input box. From view I am trying to put max number of tags. Everything is working fine, but input box is red, It is showing like following text image. Like warning. How to fixed it. enter image description here

Working Demo

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>

Upvotes: 4

Views: 1044

Answers (1)

Michael Benford
Michael Benford

Reputation: 14114

Most options of ngTagsInput are simply DOM attributes, thus you should use interpolation in order to dynamically change them:

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

That would work, but not quite as one might expect. To keep the number of watches as low as possible, ngTagsInput doesn't actively monitor DOM attributes by default, so the {{maxtags}} expression above is evaluated only once. In your case, that seems to be enough. But if it isn't, you can change that behavior by using the tagsInputConfigProvider service in your module`s config block:

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

You can learn more about that on ngTagsInput documentation.

Finally, here is your updated Plunker.

Upvotes: 4

Related Questions