如何在角度中重新运行过滤器

How to rerun filter in Angular

本文关键字：重新运行 过滤器      更新时间：2023-09-26

我有这个HTML，我无法更改它：

<div>How much is 100 * X {{100 | myFilter}}</div>

这是过滤器：

X=3
app.filter(function(){
   return function(val){
       return val*X
   })
})

现在我想更改 X：

X=5

我希望 HTML 重新运行此过滤器并更新受此过滤器影响的所有值并更新值

X 仅定义为全局 JavaScript var，而不是在 HTML 中。我希望如果 X 值发生变化，它将更新依赖于它的任何过滤器。

我找到了答案。 还有谁需要它。我所要做的就是让过滤器在每个摘要周期重新运行：

      filter.$stateful = true;

然后，在更改 X 后，我可以简单地使用 $apply 或 $digest 运行摘要循环。

演示有状态筛选器的 JSFiddle：

http://plnkr.co/edit/MRiGzYgXTmLLgrH9FnB1?p=preview

如果我

理解正确，那么您希望更改/输入 X 的值，结果在 html 中应该是 X * 100。在这里，我创建了小演示。看看它是否对你有帮助。

<div ng-app="myApp" ng-controller="MyCtrl">
  Input: <input ng-model="X">
  <div>How much is 100 * {{X}} = {{X | myFilter}}</div>
</div>
var myApp = angular.module('myApp', []);
myApp.filter('myFilter',function(){
   return function(val){
       return 100 * val; 
   }
})
myApp.controller('MyCtrl',['$scope', function($scope) {  
    $scope.X = 3;    
}
]);

更新了带有状态过滤器、外部函数的演示。

<div id="appid" ng-app="myApp">  
<div>How much is 100 * <span id="spX">X</span> {{100 | myFilter}}</div>  
</div>
<button onclick="changeX()">
Change
</button>
var X = 3;
var myApp = angular.module('myApp', []);
myApp.filter('myFilter',function(){
    function filter(val) {
      return val * X; 
  }
   filter.$stateful = true;
   return filter;
})
document.getElementById("spX").innerText = X;
function changeX(){
  X = 5;
  document.getElementById("spX").innerText = X;
  var scope = angular.element(document.getElementById("appid")).scope();
  scope.$apply();
}
相关文章：