【问题标题】:How to ng-repeat only after applying the filter?如何仅在应用过滤器后进行 ng-repeat?
【发布时间】:2019-01-09 20:42:34
【问题描述】:

首先,让我提一下,我是 AngularJS 的新手,也是编程新手。 我的情况如下:

我正在处理从 SQL 数据库中提取的超过 50k 个条目。

在对这些条目应用搜索/过滤器后,我必须在网络平台上显示这些条目。

所以我对此进行了一些研究,并得出结论,要走的路是: SQL>PHP>JSON>ANGULARJS。 我把这一切都记下来了,问题是 ng-repeat 将所有内容发送到浏览器,我想要过滤结果,然后用 ng-repeat 打印它们。

我试图实现某种过滤器,但我似乎无法解决它。

代码如下:

js:

var app = angular.module('myApp' ,[]);

app.controller('MainCtrl', function($scope, $http)
{
  $http.get("http:source.php")
  .then(function(response)
  {
    $scope.materiale = response.data.records;
  });
});

app.filter('filtruCautare', function () {
    return function (items, filtru) {
        var filtered = [];
        var filtruMatch = new RegExp(filtru, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (filtruMatch.test(item.MATKL) || filtruMatch.test(item.MAKTX)) {
                filtered.push(item);
            } else if (filtruMatch.test(item.MATNR)) {
                    filtered.push(item);
            }
        }
        return filtered;
    };
});

html:

 <input ng-model='filtru' type="text" placeholder="...">

<tbody ng-repeat="material in materiale | filtruCautare:filtru">

我从几个博客、Stackoverflow 帖子/问题和其他几个来源将这些放在一起......

我认为我需要以某种方式过滤 50k 条目,将它们存储在一个范围内并使用 ng-repeat 从那里打印结果,只是我无法创建一个从过滤器中提取信息的范围.

感谢任何帮助!

【问题讨论】:

  • ng-repeats 渲染materiale 包含的任何内容。只要materiale 更新,ng-repeat 也会更新并刷新视图。这就是 Angular 的工作原理。

标签: javascript angularjs angularjs-ng-repeat angularjs-filter


【解决方案1】:

如果未定义搜索过滤器(或为空字符串),只需更改过滤器即可返回空数组。

这样,只有在开始过滤时,您才会开始看到结果:

app.filter('filtruCautare', function () {
    return function (items, filtru) {
        if (!filtru) { 
          return [];
        }
        var filtered = [];
        var filtruMatch = new RegExp(filtru, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (filtruMatch.test(item.MATKL) || filtruMatch.test(item.MAKTX)) {
                filtered.push(item);
            } else if (filtruMatch.test(item.MATNR)) {
                    filtered.push(item);
            }
        }
        return filtered;
    };
});

【讨论】:

  • 您,先生,是生命的救星。我一直在寻找更复杂的解决方案,但这个巧妙的小技巧做到了,非常感谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-11-23
  • 2015-08-02
  • 2021-02-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多