Question

我的问题是我想延迟angularjs中的ng-repeat结果。我的延迟过滤器代码如下。

    <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>

但这不起作用。搜索提供即时结果。我没有在HTML中编写控制器，我知道。在我的代码中它。那不是问题。请帮我解决这个问题

Answer 1

我认为您应该使用angular.filter制作指令或单独的过滤器。否则，如果你想让它工作，你可以使用$ timeout

Answer 2

您可以提取到这样的指令（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);
        }]
    };
}]);

HTML是：

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

Answer 3

请勿在过滤器中执行此操作。我绝对没有责任延迟渲染。你应该写一个指令。

如果您真的坚持这样做，请使用在使用$timeout延迟后更新的标志，并仅在标志设置为true时使过滤器返回结果：

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

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

工作示例here。

其他建议：在Angular中进行编码时，您应该优先$timeout而不是setTimeout，因为它会在执行参数函数后处理更改的摘要。 vanilla版本强制您调用$scope.$apply()来更新模型。

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

3 个答案: