web-dev-qa-db-fra.com

Filtre personnalisé donnant "Impossible de lire la propriété" tranche "de non défini" dans AngularJS

Mon filtre startFrom personnalisé me donne une erreur.

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

app.controller("PostCtrl", function($scope, $http) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.hidePagination = true;

$scope.search = function() {
    $http.get('someurl').then(sucesscalback,errorcalback);
    function sucesscalback(response)
    {
        $scope.hidePagination = false;
        console.log("Success:");
        console.log(response.data.records);
        $scope.posts = response.data;
        $scope.numberOfPages=Math.ceil($scope.posts.records.length/$scope.pageSize); 
        alert($scope.numberOfPages);
    }
    function errorcalback(failure)
    {
        console.log("Error:");
        console.log(failure);
    }
javascriptangularjspaginationangularjs-ng-repeat
15
Fahad Khan

Votre filtre doit vérifier si l'entrée existe ou non:

app.filter('startFrom', function() {
    return function(input, start) {
        if (!input || !input.length) { return; }
        start = +start; //parse to int
        return input.slice(start);
    }
});

Sinon, la fonction de filtrage s'exécutera et appellera donc slice sur undefined qui n'a pas la propriété slice comme un tableau ou une chaîne.

La raison pour laquelle le filtre est appelé alors qu'il n'y a pas de valeur est que le filtre s'exécutera lorsque Angular exécute son premier $digest cycle. Vous pouvez éviter l'erreur en ajoutant une valeur initiale dans le contrôleur, mais il est préférable d'ajouter simplement l'instruction if au filtre.

Voici une démonstration des deux solutions. Notez qu'il n'y a aucune erreur.

48
m59