CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-bootstrap
Guest
Guest

Reputation: 515

How to use tags-input inside the directive template?

I want to use tag-input inside the directive template. In the following example we are using input-text box inside directive's template, I want to use tags-input, instead of input-box. Please see the following code, Inside template of directive I am using Here Use tags-input: <input type="text" ng-model="modeldisplay" ></input>, I want to use here tag-input:

For this include the following lib 

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

Plunker Demo:

// Code goes here 
var app = angular.module("myApp", ['ngTagsInput']);

app.directive("myDirective", function(){
  return {
    restrict: "E",
    template : '<h1>Click to choose!</h1><div class="clkm"'+
    'ng-repeat="item in items" ng-click="updateModel(item)">{{item}}</div>' +
    'Here Use tag-input: <input type="text" ng-model="modeldisplay" ></input>',
    require: 'ngModel',
    scope : {
      items : "=",
      modeldisplay:'= modeldisplay'
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(item)
      {
        ctrl.$setViewValue(item);
        scope.modeldisplay = item;
      }
    }
  };
});

app.controller("appCtrl", function($scope){ 
  $scope.items = [1,2,3,4,5,6];
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  }

});

Upvotes: 1

Views: 539

Answers (2)

Ankur Panchani
Ankur Panchani

Reputation: 36

Add css and js in html:

<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>

Make following change in code:
1. Replaced scope.modeldisplay = item; with scope.modeldisplay.push({"text":item});

// Code goes here
var app = angular.module("myApp", ['ngTagsInput']);

app.directive("myDirective", function(){
  return {
    restrict: "E",
    template : '<h1>Click to choose!</h1><div class="clkm"'+
    'ng-repeat="item in items" ng-click="updateModel(item)">{{item}}</div>' +
    'Here Use tag-input: <tags-input ng-model="modeldisplay" ></tags-input>',
    require: 'ngModel',
    scope : {
      items : "=",
      modeldisplay: "="
    },
    link : function(scope, element, attrs, ctrl){
      scope.updateModel = function(item)
      {
        ctrl.$setViewValue(item);
        scope.modeldisplay.push({"text":item});
      }
    }
  };
});

app.controller("appCtrl", function($scope){ 
  $scope.items = [1,2,3,4,5,6];
  $scope.tags = [];
  $scope.bar = function(foo)  {
    $scope.aux = foo;
  };

});

Demo

Upvotes: 1

Rambler
Rambler

Reputation: 5482

First make sure that you are importing the ngInputTags script :

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

Second , you are not injecting the ngInputTags into your module.

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

Do these and then include the tag in your template : to get the result.

Upvotes: 0

Related Questions