使用过滤器延迟ng-repeat结果

Question

My problem is I want to delay the ng-repeat result in angularjs. My code for the delaying filter is below.

    <ul>
     <li ng-repeat="phone in phones | filter:delay_filter">
     <span>{{phone.name}}</span>
     </li>
     </ul>
     <script>
 var phonecatApp = angular.module('phonecatApp', ['ngMessages']);
phonecatApp.controller('PhoneListCtrl', function ($scope, $http, $scope) {
     $scope.delay_filter=function(item){
        alert(++$c);
        x=setTimeout($scope.trf(),2200);
        return item;
    };};)
     </script>

But this doesn't work. The search gives instantaneous results. I didn't write controller in the html and I know that. In my code its there. Thats not the problem. Please help me with this problem

Answer 1

I think you should make a directive or a separate filter using angular.filter. Otherwise if you want this to work you can use $timeout

Answer 2

You can extract to a directive like this ( http://jsfiddle.net/xL02yhzz/3/ ):

angular.module('Joy', [])
.controller('RepeatCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
    $scope.data = [1, 2, 3, 5, 8, 13, 21, 34];
}])
.directive('delayRepeat', [function () {
    return {
        restrict: 'A',
        scope: {
            myListData: '='
        },
        template:
            '<div>' +
            '<ul>' +
            '<li ng-repeat="d in myListData" ng-bind="d"></li>' +
            '</ul>' +
            '</div>',
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
            $timeout(function () {
                $scope.myListData = [55, 89, 144, 233, 377];
            }, 5000);
        }]
    };
}]);

The HTML is:

<div ng-app="Joy">5 seconds will change:
    <div ng-controller="RepeatCtrl">
        <div delay-repeat my-list-data="data"></div>
    </div>
</div>

Answer 3

Don't do that in the filter. I's absolutely not its responsibility to delay rendering. You should write a directive instead.

If you really insist on doing it this way, use a flag that you update after a delay using $timeout , and make the filter return results only if the flag is set to true :

var delayInMilliseconds = 3000;
var doneWaiting = false;
$scope.delay_filter= function(item){
    return doneWaiting;
};

$timeout(function() {
    doneWaiting = true;
}, delayInMilliseconds);

Working example here .

Additional advice : you should prefer $timeout over setTimeout when coding in Angular, as it handles the digesting of changes once the parameter function is executed. The vanilla version forces you to call $scope.$apply() to update your model.