AngularJS过滤器不能很好地工作

时间:2016-12-29 13:33:14

标签: javascript angularjs angularjs-filter

我有一个数组($ scope.names),其中包含一些简单的对象,我正在应用一些函数来清除变音符号中的值。当我用控制台打印这个值时,它显示我没问题。例如:'La 45 km nord- vestdeBucureşti'将是'La 45 km nord- vest de Bucuresti'。

我正在应用此方法并使用另一个变量($ scope.searchText)来使可搜索的兼容。再次,没关系。

问题是,即使我正在标准化两个变量值,过滤器也不起作用。如果我试图搜索'Bucures',它就不会显示包含干净单词'Bucures'的对象(原始单词'Bucureş')......

我做错了什么?

完整代码在此处:http://plnkr.co/edit/D5WfiOGd5I3QfcNVdOmr?p=preview

角度脚本是:

var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $filter) {
$scope.names = [
    {
        "adresa": "Str. Calafatului nr. 10",
        "latitudine": "44.1",
        "localitatea": "GALICEA MARE",
        "longitudine": "23.3",
    },
    {
        "adresa": "bd. Elisabeta nr. 1",
        "latitudine": "44.170901",
        "localitatea": "CONSTANŢA",
        "longitudine": "28.663195",
    },
    {
        "POTLOGI": "La 45 km nord- vest de Bucureşti",
        "latitudine": "44.564319",
        "localitatea": "POTLOGI",
        "longitudine": "25.588091",
    }
]

$scope.searchText = "";
$scope.searchCleanText = "";
$scope.myFilter = function (items) {
    for (var i = 0; i < items.length; i++) {
        var boolChk = false;
        angular.forEach(items[i], function (value, key) {
            var cleanValue = removeDiacritics(value).toLowerCase();
            if (boolChk === false) {
                boolChk = cleanValue.includes($scope.searchCleanText);
            }
            console.log(value + ' ' + cleanValue.includes($scope.searchCleanText) + '\tboolChk = ' + boolChk);
            return boolChk;
        });
    }
}

$scope.$watch('searchText', function() {
        $scope.searchCleanText = removeDiacritics($scope.searchText).toLowerCase();         
        $scope.showItems = $filter('filter')($scope.names, $scope.searchText, $scope.myFilter($scope.names));
        console.log($scope.showItems);
    });
});

2 个答案:

答案 0 :(得分:1)

我对过滤器代码进行了一些更改 `

$scope.myFilter = function (item) {
            //for (var i = 0; i < items.length; i++) {
                var boolChk = false;
                angular.forEach(item, function (value, key) {
                    var cleanValue = removeDiacritics(value).toLowerCase();
                    if (boolChk === false) {
                        boolChk = cleanValue.includes($scope.searchCleanText);
                    }
                    console.log(value + ' ' + cleanValue.includes($scope.searchCleanText) + '\tboolChk = ' + boolChk);
                    return boolChk;
                });
                return boolChk;
            //}
        }

    $scope.$watch('searchText', function() {
            $scope.searchCleanText = removeDiacritics($scope.searchText).toLowerCase();         
      $scope.showItems = $filter('filter')($scope.names, $scope.searchText, function(actual,expected){return $scope.myFilter(actual);});
      console.log($scope.showItems);
    });

`

选中此Plunk

答案 1 :(得分:0)

答案是使用'function(actual,expected)'返回一个布尔值:

$scope.functionFilter = function (actual, expected) {
    if (typeof actual === 'object') {
        var obj = actual;
        //console.log(obj);

        var boolChk = false;
        angular.forEach(obj, function (value, key) {
            var cleanValue = removeDiacritics(value).toLowerCase();
            if (boolChk === false) {
                boolChk = cleanValue.includes($scope.searchCleanText);
            }
        });
        console.log(obj);
        console.log(boolChk);
        return boolChk;
    }
}