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)">

但是，由于用户在编辑数百个未保存更改的项目时需要过滤数组，因此我不确定如何继续。我应该改用ng-show吗？还是有更好的香草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 - Creating Custom Filters

您能解释inputArr的目的吗？

filter函数的第一个参数是要过滤的数组。这样，它可以与其他范围变量一起使用：

<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 - Using filters in view templates

angularjs：使用输入标签按名称过滤未保存更改的数组

1 个答案: