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

Question

I have this HTML, I cannot change it:

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

This is the Filter:

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

Now I want to Change X:

X=5

And I want the HTML to rerun this filter and update all the values that affected by this filter and update the value

X is only defined as global JavaScript var. not in the HTML. I want that if the X value changes it will update any filter that depends on it.

Answer 1

I found an answer. To who else need it. All what I have to do is to make the filter rerun on every digest cycle::

      filter.$stateful = true;

Then. after changing X, I can simply run the digest cycle using $apply or $digest.

JSFiddle that demonstrate stateful filters:

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

Answer 2

If I understand you correctly then you want to Change/Input value of X and result should be X * 100 in html. Here I have created small demo . See if it helps you.

<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;    
}
]);

Updated demo with stateful filter, external function.

<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();
}