使用過濾器延遲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結果

回答

相關問題