AngularJS 过滤器只显示匹配的词作为结果，而不是整个字符串

Question

是否可以在带过滤器的 ng-repeat 中只显示匹配的词？

例如我有以下字符串

[
{text: 'This is first text from the array.'},
{text: 'Text in this array is dummy and it makes no sense'}, 
{text: 'AngularJS is very old framework'}
]

如果我搜索字符 "fr"，那么我希望在我的列表中仅显示 ti 个元素：数组中第一个字符串的 "from" 和最后一个字符串的 "framework" .我不需要显示整个字符串。

结果应该是例如：

<li>from</li>
<li>framework</li>

在过滤器服务中，我尝试将 {text:} 值更新为等于匹配值，但它更新了原始对象数组；

这是我的 JSFiddle Filter Example JSFiddle

Answer 1

您可以将字符串拆分为包含单个单词的数组，您可以对其进行过滤以仅查找字符串中与过滤字符串匹配的单词。这是一个例子：

var text = value.text.split(' ');
var matchedWords = []
matchedWords = text.filter(res => res.indexOf(filterValue) > -1)

http://jsfiddle.net/brmt0cLj/8/

Answer 2

它不太好，但你可以试试这个，它几乎可以满足你的要求。我建议您在其他 ng-repeat 块中呈现搜索，这样可以简洁高效。

items.filter(list => {
        if (list.text.toLowerCase().includes(filterValue)) {
          let catchPattern = new RegExp('(\w*' + filterValue + '\w*)', 'gi');
          let matches = list.text.toLowerCase().match(catchPattern)
          if (!matches)
            return items;

          filterdArray.push({
            'text': matches,
            'id': list.id
          })
        }

      });

附上 fiddle 同样的： Find Word from the string

AngularJS 过滤器只显示匹配的词作为结果，而不是整个字符串

AngularJS filter show only matched word as result, not entire string

angularjs

angularjs-ng-repeat

angularjs-filter