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

我的问题是我想延迟angularjs中的ng-repeat结果。我的延迟过滤器代码如下。使用过滤器延迟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中编写控制器，我知道这一点。在我的代码在那里。那不是问题。请帮我解决这个问题

来源

2015-07-20 Sai Babu B

看看这是这样的http://stackoverflow.com/questions/18238227/delay-an-angular-js-http-service – Jax

你试图实现与延迟？如果这是为了视觉上的延迟，ng-animate有一个错误，你可以使用这样的东西。 – ajmajmajma

您是否需要延迟ng-repeat的显示，或者是否需要延迟手机上的某种搜索/过滤器？ –

不要在过滤器中这样做。我绝对没有责任推迟渲染。你应该写一个指令。

如果你真的坚持做这种方式，使用您使用$timeout延迟一段时间后更新，使只有标志设置为true过滤器返回结果的标志：

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

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

工作示例here。

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

来源

2015-07-20 13:18:03

有没有办法将结果设置为每3秒钟一个接一个地加载直到结束？ –

@ObasiObenyOj是的，使用'$ interval' Angular服务。 –

我想你应该使用angular.filter制作一个指令或单独的过滤器。否则，如果你想要这个工作，你可以使用$超时

来源

2015-07-20 13:53:10

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

来源

2015-07-20 14:37:00 Joy

现在就是我说的！ –

我不是OP大声笑。 –

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

回答

相关问题