Фильтр 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 Пример фильтра 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
          })
        }

      });

Прикрепленная скрипта для того же: Найти слово из строки

Answer 2

Вы можете разбить свои строки на массивы с отдельными словами, которые вы можете отфильтровать, чтобы найти только те слова в строке, которые соответствуют вашей строке фильтра.Вот пример:

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

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