Question

我需要将一堆变量传递给过滤器，所以我认为传递整个模型会更容易，因为它只是一个参考。所以我试着这样做（这是一个简化的版本）：

app.filter('applyLimit', function() {
  return function(files, m) {
    return files.map(function(v,i){
        v.analyze = i < m.limit
      return v
    })
  }
});

angular.module("app").component("h2jcomponent", {
    templateUrl: "html/View.html",
    controllerAs: "m",
    controller: ['$filter', H2J_Controller]
});

function H2J_Controller($filter) {
    var m = this
    m.limit = 1
    var files = [{name:'foo.java',analyze:true},{name:'bar.java',analyze:true}]
    $filter('applyLimit')(files,m)
}

但是我收到以下错误：

TypeError: Cannot read property 'limit' of undefined

我假设这是因为我无法将整个模型传递给过滤器，但我不确定。这可能吗？

Answer 1

第一个过滤器的参数应该被处理数组（在我们的例子中是文件），然后是任何可选的附加参数（在我们的例子中是 limit ）。通过这种方式，我们的过滤器可以在HTML中使用指令，如 ng-repeat （ng-repeat="file in vm.files | vm.applyLimit : vm"），或者只是在大括号内的角度表达式，如

<pre>{{ vm.files2 | applyLimit : vm | json }}</pre>

所以我将过滤器改写为：

app.filter('applyLimit', function() {
  return function(files, scope) {
    return files.map(function(v, i){
      v.analyze = i < scope.limit;
      return v;
    })
  }
});

更新了plunker：https://plnkr.co/edit/0TYC56eNLSugPp8tDFeH?p=preview

Answer 2

我不确定原因，但改变了params的顺序修正了它：

app.filter('applyLimit', function() {
  return function(m, files) {           // <---- changed from (files,m) to (m,files)
    return files.map(function(v,i){
        v.analyze = i < m.limit
      return v
    })
  }
});

angular.module("app").component("h2jcomponent", {
    templateUrl: "html/View.html",
    controllerAs: "m",
    controller: ['$filter', H2J_Controller]
});

function H2J_Controller($filter) {
    var m = this
    m.limit = 1
    var files = [{name:'foo.java',analyze:true},{name:'bar.java',analyze:true}]
    $filter('applyLimit')(m,files)      // <---- also here
}

如何在过滤器中使用模型？

2 个答案: