angularjs: фильтровать массив с несохраненными изменениями по имени, используя входной тег

Question

Я обычно фильтрую массив, используя тег ввода, например:

 $scope.filtername = function (vname) {

     //repopulate the array from a copy every time input changes

     $scope.items = $scope.items_filter;

     //filter array if vname is a substring from item.name

     if (vname && vname.trim() != '') {
        $scope.items = $scope.items.filter((item) => {
          return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
        })
      }
 };

<input type="search" ng-model="namev" ng-change="filtername(namev)">

Но поскольку пользователю необходимо отфильтровать массив при редактировании сотен элементов с несохраненными изменениями, я не уверен, что делать дальше. Должен ли я использовать нг-шоу вместо этого? или есть лучший способ ванильного JavaScript?

Answer 1

Есть ли у вас лучший способ фильтрации массива с помощью поиска?

Один из подходов заключается в создании пользовательского фильтра:

app.filter("myFilter", function() {
    return function(inputArr,vname) {

        //repopulate the array from a copy every time input changes

        var result = inputArr.concat();

        //filter array if vname is a substring from item.name

        if (vname && vname.trim() != '') {
            result = result.filter((item) => {
              return (item.name.toLowerCase().indexOf(vname.toLowerCase()) > -1);
            });
        };

        return result;
    };
})

Использование:

<input type="text" ng-model="namev" />

<div ng-repeat="item in items | myFilter : namev">
    {{item.name}} {{item.contents}}
</div>

Для получения дополнительной информации см. AngularJS Developer Guide - Создание пользовательских фильтров

---

Можете ли вы объяснить цель inputArr?

Первый аргумент функции фильтра - это массив для фильтрации. Таким образом, его можно использовать с другими переменными области видимости:

<div ng-repeat="item in items | myFilter : namev">
    {{item.name}} {{item.contents}}
</div>

<div ng-repeat="o in otherItems | myFilter : namev">
    {{o.name}} {{o.contents}}
</div>

Когда AngularJS передает данные в фильтр, он вызывает функцию фильтра с данными в качестве первого аргумента. Последующие аргументы происходят из выражений, разделенных двоеточиями (:).

Для получения дополнительной информации см. AngularJS Developer Guide - Использование фильтров в шаблонах представления