Angularjs ng-tags-input repeat tags

一、這裡分享一些在使用ng-tags-input上所遇到的一些問題，包括了標籤重複、autocomplete過濾重複標籤、中文輸入法問題：     

 (一)首先看到這個Demo頁： http://mbenford.github.io/ngTagsInput/demos，當我們輸入Tag3時會被標示為紅色，代表重複標籤。    

 (二)另外autocomplete的部分也可以發現Tag3已經被過濾掉了。    

 (三)最後是中文輸入法的部分，當我們輸入完畢並選好詞組按下enter後，才觸發loadTags事件。

二、原始碼： https://github.com/mbenford/ngTagsInput/releases/download/v2.3.0/ng-tags-input.zip

三、原始專案： https://github.com/mbenford/ngTagsInput

四、修改後範例： http://plnkr.co/edit/o0JZnP?p=preview

  (一)關於Tag重複的問題我們可以看到原始碼的86行，這一段主要在進行輸入標籤的驗證。

   tagIsValid = function(tag) {
                var tagText = getTagText(tag);
                return tagText &&
                    tagText.length >= options.minLength &&
                    tagText.length <= options.maxLength &&
                    options.allowedTagsPattern.test(tagText) &&
                    !tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty) &&
                    onTagAdding({ $tag: tag });
            };

 那我們可以看到這一段，再進行重複標籤的驗證，因此可以先行註解。

 !tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty) &&

  如此一來我們輸入重複標籤就能順利通過驗證。
     

  (二)但是可以發現autocomplete還是會將已經存在的標籤過濾，因此我們可以看到569行，這一段主要進行過濾，將重複的標籤濾掉，因此我們也可以先行註解。
items = getDifference(items, tags);
  (三)最後當我們在中文輸入時可以看到下面的圖示未按下Enter確定輸入詞組時並不會有自動提示的出現。

  關於此功能的實現，可以運用element.on來監聽input輸入框，當輸入框一輸入任何文字就監聽並取得其值，並更新綁定的值，因此可以在該directive的link function內加入，也就是279行的地方加入，使用element.find 來找到input的元素並取得其值：

 element.on('input', function (v) {
                    var value = element.find('input').val();
                    var regExp = /(\s)/g
                    var match = regExp.exec(value)
                    if (match != null) {
                        tagList.addText(scope.newTag.text);
                    } else  scope.newTag.setText(value);
                })

四、另外為了增加彈性我們可以替這些設定增加參數，tagsRepeat、chineseMode，217行

 tagsRepeat: [Boolean,false],
                    chineseMode: [Boolean,false]

 當然我們也需要替這些功能做一些修正，回到剛剛的86行，修正一些驗證的判斷，如果tagsRepeat = true就不進行重複性驗證

 tagIsValid = function (tag) {
                var tagText = getTagText(tag);
                var vaild = tagText &&
                    tagText.length >= options.minLength &&
                    tagText.length <= options.maxLength &&
                    options.allowedTagsPattern.test(tagText) &&
                    onTagAdding({ $tag: tag });
                if (!options.tagsRepeat){
                    vaild = vaild && !tiUtil.findInObjectArray(self.items, tag, options.keyProperty || options.displayProperty);
                }
                return vaild;
            };

autocomplete的驗證亦同，580行

 if (options.tagsRepeat)items = getDifference(items, tags);

最後是中文輸入法問題，283行

if (options.chineseMode){//中文模式
                    element.on('input', function (v) {
                        var value = element.find('input').val();
                        var regExp = /(\s)/g
                        var match = regExp.exec(value)
                        if (match != null) {
                            tagList.addText(scope.newTag.text);
                        } else  scope.newTag.setText(value);
                    })
                }