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 var。不在HTML中。我希望如果X值发生变化，它将更新依赖于它的任何过滤器。

Answer 1

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

      filter.$stateful = true;

然后。更改X后，我可以使用$ apply或$ digest运行摘要周期。

演示有状态过滤器的JSFiddle：

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

Answer 2

如果我理解正确，那么你想要改变/输入X的值，结果应该是h *中的X * 100。在这里，我创建了小demo。看看它是否对你有帮助。

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

使用有状态过滤器，外部函数更新demo。

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

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

2 个答案: