在不改變ng-repeat模型的情況下刷新過濾器（上的項目）

我有一個格式化日期爲'時間前'格式（momentjs）的過濾器。我希望過濾器的值能夠隨着時間的推移重新繪製，而不需要改變模型。在不改變ng-repeat模型的情況下刷新過濾器（上的項目）

例如：

當前日期沃爾德秀「幾秒鐘前」一段時間後
我想的值更改爲「幾分鐘前，」
等...功能

var app = angular.module('test', []); 
 
app.filter('fromNow', function(){ 
 
\t return function(value){ 
 
    \t return moment(value).fromNow(); 
 
    } 
 
}); 
 

 
app.controller('TestCtrl', function($scope, $interval){ 
 
\t $scope.list = [ 
 
    \t { 
 
    \t text: 'foo', 
 
     date: moment() 
 
    } 
 
    ]; 
 
    
 
    var counter = 0 
 
    $interval(function(){ 
 
    \t counter++; 
 
    \t $scope.list[0].date = moment().subtract(counter, 'minutes'); 
 
    }, 1000) 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="TestCtrl"> 
 
    <div ng-repeat="item in list"> 
 
    {{item.text}} - {{item.date | fromNow}} 
 
    </div> 
 
</div>

來源

2016-03-02 Terafor

問題是什麼？ –

的一種方式是有狀態的過濾器，如所描述的here。新的過濾器定義不同之處僅在於它包含$stateful標誌：

app.filter('fromNow', function(){ 
    function fromNow(value){ 
    return moment(value).fromNow(); 
    } 

    fromNow.$stateful = true; 

    return fromNow; 
});

而且需要定期運行的消化，因此空區間函數就可以了：

$interval(function() { 
    // NOTHING 
}, 2000);

檢查出來here 。

BUT，如在過濾器的參考頁指出上面鏈接：

強烈氣餒寫過濾器是有狀態的，因爲那些的執行不能由角，這往往被優化導致性能問題。許多有狀態過濾器可以轉換爲無狀態過濾器，只需將隱藏狀態作爲模型公開，並將其轉換爲過濾器的參數即可。

如果您真的可以豐富模型，甚至使用替代視圖模型，以免污染您的主模型，它會更有效。例如： -

// in the controller: 
    // watch so that you can respond to changes in the list; if not necessary, just omit this line (and) 
    $scope.$watchCollection('list', calculateFromNowList); 

    function calculateFromNowList(list) { 
    $scope.fromNowList = list.map(function(x) { 
     return x.date.fromNow(); 
    }); 
    } 

    $interval(function() { 
    calculateFromNowList($scope.list) 
    }, 1000)

而且你不再需要的過濾器，只需更改模板：

<div ng-repeat="item in list"> 
    {{item.text}} - {{fromNowList[$index]}} 
</div>

上面的代碼定期計算「從現在開始」的字符串到一個單獨的模型，並顯示。相關小提琴here。

我擔心的是，這段代碼每秒都會觸發摘要循環，只是爲了進行非常具體的更改。如果出現性能問題，則使用一些指令和瀏覽器的setInterval來直接更新DOM可能更有效率，例如，如this fiddle。這個解決方案是DIRTY，但在這裏作爲最後的手段，當性能變得有問題時。

來源

2016-03-02 10:38:50

在不改變ng-repeat模型的情況下刷新過濾器（上的項目）

回答

相關問題