AngularJS指令與過濾器和彩色

我有簡單對象（只包含名）在我的模型的列表：AngularJS指令與過濾器和彩色

var list = [{name: "Jane"}, {name: "Mary"}];

我在這裏顯示出來：

<table> 
<tr data-ng-repeat="pers in list | filter: filter.label > 
<td > 
{{pers.name }} 
</td> 
</tr> 
</table>

這很好。

我也有一個過濾器：

Name: <input type="text" data-ng-model="filter.name" />

，我需要做的是爲紀念過濾匹配一些色彩：例如，如果你輸入「A」符號應該顯示搜索結果：瑪麗， Jane的子字符串「A」將是紅色的。我想我需要使用指令，但我沒有太多的經驗與他們，我想知道如果有人可以建議我怎麼能達到這個結果？謝謝。

來源

2015-11-07 Jack Smith

這不是因爲它需要在''標籤包裝的火柴一項簡單的任務。是的，它將涉及使用指令，正則表達式和dom操作。建議您查看現有的熒光筆指令。您的問題的範圍如此廣泛 – charlietfl

您需要使用過濾器來提取匹配的搜索字詞並用突出顯示樣式替換爲標記。

<table> 
<tr data-ng-repeat="pers in list | filter: filter.label" ng-bind-html="pers.name | highlight:filter.label"> 
<td > 
{{pers.name }} 
</td> 
</tr> 
</table>

您的過濾器會是這個樣子：

.filter('highlight', function($sce) { 
    return function(text, phrase) { 
     if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
     '<span class="highlighted">$1</span>') 

     return $sce.trustAsHtml(text) 
    }

結帳這個demo和code

來源

2015-11-07 09:45:50 MayK

MayK，非常感謝！它幫助！乾杯! –

AngularJS指令與過濾器和彩色

回答

相關問題