Deepanjan Deepanjan - 5 months ago 40
Javascript Question

Custom directive for Tagging using angularJS

I'm not able to add tag in my text field. Can anyone help me with an approach to add text in a text field as tagging. How to bing the tag to a json object or an variable.

</script>
<script>
var app = angular.module('myApp',[]);

app.directive('tagInputType', function() {
return {
restrict: 'E',
scope: { tags: '=' },
template:
'<div class="tags">' +
'<a ng-repeat="(idx, tag) in tags" class="tag" ng-click="remove(idx)">{{tag}}</a>' +
'</div>' +
'<input type="text" placeholder="Add a tag..." ng-model="new_value"></input> ' +
'<input type="button" value="Add" ng-click="add()"></input>',
link: function ( $scope, $element ) {
// var input = angular.element( $element.children()[1] );

$scope.add = function() {
$scope.tags.push( $scope.new_value );
$scope.new_value = "";
};

$scope.remove = function ( idx ) {
$scope.tags.splice( idx, 1 );
};

input.bind( 'keypress', function ( event ) {

if ( event.keyCode == 13 ) {

$scope.$apply( $scope.add );
}
});
}
};
});

app.controller('MainCtrl', function ( $scope ) {
$scope.tags = { "value1":"angular","value2":"html"};
});
</script>

Answer
<script>
  App.directive('dhTag', function($compile) {
    return {

      restrict: 'AE',
      scope: {
        taglist: '=list',
        autocomplete: '=autocomplete',
        display: '='
      },
      link: function($scope, element, attrs) {

        $scope.defaultWidth = 490;
        $scope.tagText = "";
        $scope.placeholder = attrs.placeholder;
        $scope.display = attrs.display;



        $scope.tagArray = function() {
          return $scope.taglist || [];
        };


        $scope.addTag = function() {
          //debugger
          var tagArray;
          if ($scope.tagText.length === 0) {
            return;
          }
          tagArray = $scope.tagArray();

          for (var i = 0; i < tagArray.length; i++) {
            if (tagArray[i].name == $scope.tagText) {
              alert("Tag already exists in the content box!!");
              return;
            }
          }

          tagArray.push({
            name: $scope.tagText
          });
          $scope.taglist = tagArray;
          $scope.tagText = "";
        };


    $scope.deleteTag = function(key) {
      var tagArray;
      tagArray = $scope.tagArray();
      if (tagArray.length > 0 && $scope.tagText.length === 0 && key === undefined) {
        tagArray.pop();
      } else {
        if (key !== undefined) {
          tagArray.splice(key, 1);
        }
      }
      $scope.taglist = tagArray;
    };



    $scope.$watch('tagText', function(newVal, oldVal) {
      var temp;
      if (!(newVal === oldVal && newVal === undefined) && temp) {
        //temp = $("<span>" + newVal + "</span>").appendTo("body");
        $scope.inputWidth = temp ? temp.width() : 0;
        if ($scope.inputWidth < $scope.defaultWidth) {
          $scope.inputWidth = $scope.defaultWidth;
        }
        return temp.remove();
      }
    });

    $scope.processKey = function(e) {
      var key;
      key = e.which;
      if (key === 9 || key === 13 || key === 188) {
        $("div").find('.dh-tag-ctn .input-tag').css({
          "background-color": " #FCF8E3"
        });
        e.preventDefault();
        return $scope.addTag();
      }
      if (key === 8) {
        $("div").find('.dh-tag-ctn .input-tag').css({
          "background-color": "rgba(255, 0, 0, 0.15)"
        });
        $scope.deleteTag();
      }
    };
  },
  //templateUrl: "tagInputTemplate.html",
  template: "" +
    "<div  class='dh-tag-ctn'>" +
    "   <div class='input-tag' ng-hide={{display}} data-ng-repeat=\"tag in tagArray() track by $index\" ng-class='tag' >" +
    "       <span>{{tag.name}}</span>" +
    "       <div class='delete-tag' data-ng-click='deleteTag($index)'>&nbsp;&times;</div>" +
    "   </div>" +
    "   <input type='text' data-ng-style='{width: inputWidth}' ng-model='tagText' ng-keypress='processKey($event)' ng-keyup='processKey($event)' placeholder='{{placeholder}}' />" +
    "</div>" +
    "<br>" +
    "<div ng-show={{display}} class='dh-tag-ctn-view'><div class='input-tag' data-ng-repeat=\"tag in tagArray() track by $index\" ng-class='tag'>{{tag.name}}" +
    "   <div class='delete-tag' data-ng-click='deleteTag($index)'>&times;<br></div>" +
    "</div>"
    };
  });
</script>