Question

我无法在文字字段中添加标记。任何人都可以帮助我在文本字段中添加文本作为标记。如何将标记绑定到json对象或变量。

{{1}}

Answer 1

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

使用angularJS进行标记的自定义指令

1 个答案: