刷新过滤器(在项目上），而不更改 ng 重复模型

Refresh filter (on item) without changing ng-repeat model

本文关键字：ng 模型 过滤器 项目 刷新      更新时间：2023-09-26

我有一个过滤器，它将日期格式化为"时间前"格式（momentjs）。我希望过滤器值随着时间的推移"重新绘制"自己，而无需更改模型。

例如：

  • 当前日期将显示"几秒钟前"
  • 一段时间后，我想将值更改为"几分钟前"
  • 等。。。

我要 https://jsfiddle.net/u66aaz3u/1/的功能示例

var app = angular.module('test', []);
app.filter('fromNow', function(){
	return function(value){
  	return moment(value).fromNow();
  }
});
app.controller('TestCtrl', function($scope, $interval){
	$scope.list = [
  	{
    	text: 'foo',
      date: moment()
    }
  ];
  
  var counter = 0
  $interval(function(){
  	counter++;
  	$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>

一种方法是有状态过滤器，如此处所述。新的筛选器定义的区别仅在于它包含 $stateful 标志：

app.filter('fromNow', function(){
    function fromNow(value){
    return moment(value).fromNow();
  }
  fromNow.$stateful = true;
  return fromNow;
});

并且您需要定期运行摘要，因此空间隔函数将执行以下操作：

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

在这里查看。

但是，如上面链接的过滤器参考页面中所述：

强烈建议不要编写有状态的过滤器，因为 Angular 无法优化这些过滤器的执行，这通常会导致性能问题。许多有状态筛选器可以转换为无状态筛选器，只需将隐藏状态公开为模型并将其转换为筛选器的参数即可。

如果您实际上可以丰富模型，甚至使用替代视图模型，以免污染您的主模型，那将更有效。 例如：

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

上面的代码定期将"从现在开始"字符串计算到一个单独的模型中并显示它。这里的相关小提琴。

我担心的是，这段代码每秒都会触发摘要周期，只是为了一个非常具体的更改。如果出现性能问题，使用几个指令和浏览器setInterval直接更新 DOM 可能会更有效，例如在这个小提琴中。此解决方案很脏，但当性能出现问题时，作为最后的手段包含在此处。

相关文章：