如何在AngularJS中实现跨作用域表达式的动态过滤器？

你这里的核心问题是在过滤器里错误使用了{{}}插值语法——AngularJS的过滤器表达式本身就运行在当前作用域环境下，完全不需要额外做插值处理。

正确的写法 #

直接把过滤器里的{{tt.id_tipo}}换成tt.id_tipo就行，因为外层ng-repeat已经把tt变量暴露在了当前作用域中：

<div class="panel panel-default" ng-repeat="tt in tipoPlanes">
  <div class="row collapse" id="collapse{{tt.id_tipo}}" data-parent="#plans">
    <div class="col-lg-4 col-lg-offset-2 wow zoomIn plans" 
         ng-repeat="p in planes | filter : { 'tipo_planes' : tt.id_tipo }">
      <!-- 你的内容区域 -->
    </div>
  </div>
</div>

为什么原来的写法行不通？ #

当你写{{tt.id_tipo}}时，AngularJS会在模板编译阶段就把插值替换成具体的静态值（比如2），最终过滤器表达式会变成{ 'tipo_planes' : 2 }。但tt是随着外层ng-repeat动态迭代的变量，插值后的值会固定死，无法响应tt的变化，也就失去了动态过滤的意义。

而直接使用tt.id_tipo的话，过滤器会在每次作用域更新时重新求值，确保始终匹配当前迭代的tt的id_tipo，实现真正的动态过滤效果。

额外优化提示 #

如果需要严格匹配类型（比如避免数字1和字符串"1"被模糊匹配），可以给过滤器加上第三个参数true开启严格模式：

ng-repeat="p in planes | filter : { 'tipo_planes' : tt.id_tipo } : true"

内容的提问来源于stack exchange，提问作者Martin Zarza