如何在Angular中重新运行过滤器

Question

我有这个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变量。 不在HTML中。 我希望如果X值更改，它将更新依赖于它的任何过滤器。

Answer 1

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

      filter.$stateful = true;

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

JSFiddle演示有状态过滤器：

http://plnkr.co/edit/MRiGzYgXTmLLgrH9FnB1?p=预览

Answer 2

如果我理解正确，那么您想更改/输入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();
}