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

虽然不好，但是您可以尝试一下，几乎可以满足您的需求。我建议您在其他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
          })
        }

      });

附上相同的小提琴： Find Word from the string

Answer 2

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

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

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

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

2 个答案: