CODEWITHSUNDEEP
angularjstags
sudarsan
sudarsan

Reputation: 75

How to call function in ngTagsInput - AngularJS

I was trying to create tag. When user try to type particular character based on the typed values from array I need to display typeahead dropdown based on typed values.

When I click the value from dropdown, I want to call a function.

    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css"/>

<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>

<tags-input ng-model="model.invoiceSelectedAccount" 
                placeholder="Add Account" 
                replace-spaces-with-dashes="false" add-from-autocomplete-only="true" class="form-row29" display-property="shortname" style="height: 50px;background-color: transparent;" ng-change="getRolesOfSelectedAccount(model.invoiceSelectedAccount)">
      <auto-complete source="invoiceSingleSelectionaccountlist"></auto-complete>
    </tags-input>    

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {

    $scope.invoiceSingleSelectionaccountlist = [{"groupcode":"PROMNG","shortname":"HANDY BUDDY"},{"groupcode":"FMDEMO","shortname":"FMDEMO"},{"groupcode":"SRTEST","shortname":"SR Test"},{"groupcode":"HBDEMO","shortname":"Proang"},{"groupcode":"INFOST","shortname":"INFOSOFT"}];

});

I am able to list and form tag from selected value. But unable to call function when value is selected from dropdown list.

Upvotes: 0

Views: 1036

Answers (1)

Anil Arya
Anil Arya

Reputation: 3110

Add inbuilt on-tag-added="onTagAdded($tag)" method call inside <tags-input> element

And , key-property="groupcode" for unique identification.

HTML :

<tags-input ng-model="model.invoiceSelectedAccount"  on-tag-added="onTagAdded($tag)"  key-property="groupcode" placeholder="Add Account"   replace-spaces-with-dashes="false" add-from-autocomplete-only="true" class="form-row29" display-property="shortname" style="height: 50px;background-color: transparent;" ng-change="getRolesOfSelectedAccount(model.invoiceSelectedAccount)">
  <auto-complete source="invoiceSingleSelectionaccountlist"></auto-complete>
</tags-input>

Controller :

$scope.onTagAdded = function($tag) {
   alert(JSON.stringify($tag));
   //your logic 
   }

Check plunker here : https://plnkr.co/edit/7VNFHu?p=preview

Upvotes: 1

Related Questions