跳到主要內容

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);
                    })
                }

留言

張貼留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

C#資料庫操作(新增、修改、刪除、查詢)

【Excel好好玩】 自己的資產自己管!善用Google Sheet來幫我們評估貸款

這次介紹的主題是關於Excel的貸款還款計畫試算,我們人生中總會遇到需要大筆金額的花費,但當資金不夠時就得進行貸款,而貸款之前如果我們能夠審慎評估,並分析自己的還款能力之後在進行凍作,相信風險會小很多,因此就自己動動手來使用Google Sheet進行試算吧! 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式,我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉,即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能,但如果我們想要進一步管理自己的資產時,就需要將每一期的金額給計算出來,因此才會將公式運用在Excel表,讓我們的資產管理表能夠結合負債,進一步評估我們理財行動的下一步,希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴,讓我們透過有效的管理,幫助荷包長大吧! 喜歡撰寫文章的你,不妨來了解一下: Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入? 歡迎加入一起練習寫作,賺取知識,累積財富!