AngularJS 智能 Table 在显示所有行时用 space 过滤特殊字符

Question

我是运行一些使用 pipe/ajax 代码部分和 controller/service 设置的表格。 https://lorenzofox3.github.io/smart-table-website/#section-pipe

我遇到的一个问题是当值中有特殊字符并带有 space 并且它无法过滤它时。例如，如果姓氏 "last-name firstname" 无法过滤数据，但可以过滤姓名 "last-name" 并且能够做到 "lastname firstname" 就好了。

我能得到一些帮助来弄清楚为什么这可能无法正确过滤吗？

谢谢！

编辑：我注意到我忘记添加过滤器了。

app.filter('propsFilter', function() {
  return function(items, props) {
    var out = [];

    if (angular.isArray(items)) {
      var keys = Object.keys(props);

      items.forEach(function(item) {
        var itemMatches = false;

        for (var i = 0; i < keys.length; i++) {
          var prop = keys[i];
          var text = props[prop].toLowerCase();
          if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
            itemMatches = true;
            break;
          }
        }

        if (itemMatches) {
          out.push(item);
        }
      });
    } else {
      // Let the output be the input untouched
      out = items;
    }

    return out;
  };
});

app.controller('mainCtrl', ['$scope', '$window', 'Resource', function($scope, $window, service) {

    var ctrl = this;

    this.displayed = [];

    $scope.itemsByPage = $window.datatableperPage;

    this.callServer = function callServer(tableState) {

        ctrl.isLoading = true;

        var pagination = tableState.pagination;

        var start = pagination.start || 0;
        var number = pagination.number || 10;

        service.getPage(start, number, tableState).then(function(result) {
            ctrl.displayed = result.data;
            tableState.pagination.numberOfPages = result.numberOfPages; //set the number of pages so the pagination can update
            ctrl.isLoading = false;
        });
    };

}]);
app.factory('Resource', ['$q', '$filter', '$window', '$http', '$timeout', function($q, $filter, $window, $http, $timeout) {

    var nameData = [];

    $http.get($window.datatableSource).success(function(response) {
        nameData = response;
    });

    function getPage(start, number, params) {

        var deferred = $q.defer();

        var filtered = params.search.predicateObject ? $filter('filter')(nameData, params.search.predicateObject) : nameData;

        if (params.sort.predicate) {
            filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
        }

        var result = filtered.slice(start, start + number);

        $timeout(function() {
            //note, the server passes the information about the data set size
            deferred.resolve({
                data: result,
                numberOfPages: Math.ceil(filtered.length / number),
            });
        }, $window.datatableTimeout);

        return deferred.promise;
    }

    return {
        getPage: getPage
    };


}]);

更新：

在 Hardy 的帮助下，我终于能够重现这个问题。

设置时

$scope.itemsByPage = -1;

过滤后的结果似乎在切片的初始几个字符后消失了

result = filtered.slice(start, start + number);

在这个例子中，我将单词 "Clinical - " 添加到名称的开头，当您开始输入单词 "Clinical" 时无法搜索该单词，但其他单词可以正常搜索.

https://plnkr.co/edit/7n68AKbwQGpVdFOpbUuP?p=preview

Answer 1

好的，我已经跟踪了所有函数，Plunker 中的问题就在这一行。尝试将值更改为任何正整数，您会发现您的应用运行正常。

$scope.itemsByPage = -1;

在某些情况下你得到奇怪的过滤结果的原因是因为这个值稍后在

中用作number

var result = filtered.slice(start, start + number);

因此翻译成

var result = filtered.slice(0, -1);

.slice(0, -1) returns filtered 数组的浅表副本，不包括最后一项。当您只有一个过滤结果时，您将收到一个空数组。

瞧！

更新

事实证明，使用 $scope.itemsByPage = -1 的全部原因是在那种情况下对库行为的错觉。
期望的行为是 "always return all the rows" 并且可以通过使用 Infinity

轻松实现

$scope.itemsByPage = Infinity

这样我们会得到

var result = filtered.slice(0, Infinity);

从而在输出中得到初始过滤数组。

AngularJS 智能 Table 在显示所有行时用 space 过滤特殊字符

AngularJS Smart Table filtering special characters with a space when displaying all rows

javascript

angularjs

angularjs-filter

smart-table

更新