mbenford/ngTagsInput Multiple tags without key property

Question

I am trying to use mbenford/ngTagsInput directive as below

<tags-input name="skill" ng-model="storage.skills" placeholder="specializations" 
min-tags="1" add-on-enter="true" min-length="1" key-property="id" display-property="name" required> 
    <auto-complete source="getSkillSearch($query)" highlight-matched-text="true" min-length="1"></auto-complete> 
</tags-input>

Here if you see i have set the key property as id, when i add new tags(which does not have the key property), the directive does not allow me to do so more than once .

https://github.com/mbenford/ngTagsInput/issues/509 (Something very similar), but no solution to this. Is their a workaround or i am missing something very silly.

Answer 1

There is a property called onTagAdding. Provide a function that creates an id for the tag on adding. Here's an example:

HTML

<tags-input name="skill" ng-model="storage.skills" placeholder="specializations" 
min-tags="1" add-on-enter="true" min-length="1" key-property="id" display-property="name" on-tag-adding="createId($tag)" required> 
<auto-complete source="getSkillSearch($query)" highlight-matched-text="true" min-length="1"></auto-complete> 
</tags-input>

SCRIPT

$scope.createId= function(tag) {
    // Only do this if tag.id is undefined
    if(angular.isUndefined(tag.id) {        
       tag.id= tag.name; // or create a random value
    }
};