单击 2 个范围之间的过滤器

Question

我是 Angular.js 的新手，所以我不确定这是否是正确的方法。我有两个用于显示 2 组按钮的示波器。第二组应该取决于我在第一组点击的按钮。

<!-- Insulation placement -->
  $rootScope.roofs = [
    { 
      type: 'roof',
      label: 'Pitched Roof'
    },
    { 
      type: 'attic',
      label: 'Floor of Attic' 
    }
  ];


<!-- Roof insulation types -->
  $rootScope.roofInsulation = [
    { 
      target: 'roof',
      type: 'between_rafters',
      label: 'Between Rafters'
    },
    { 
      target: 'roof',
      type: 'between_rafters_counter_batten',
      label: 'Between Rafters With A Counter Batten' 
    },
    { 
      target: 'roof',
      type: 'between_rafters_calibel',
      label: 'Between Rafters With Calibel' 
    },
    { 
      target: 'roof',
      type: 'between_rafters_thermal_laminate',
      label: 'Between Rafters With Thermal Laminate' 
    },
    { 
      target: 'attic',
      type: 'test',
      label: 'Test'
    }
  ];

和我的HTML

<div ng-repeat="types in roofs">

    <button ng-click="myFilter = {target: '{{types.type}}'}" class="btn btn-primary" type="button">{{types.label}}</button>

</div>

<div>

  <button ng-repeat="variants in roofInsulation | filter: myFilter" class="btn btn-secondary" type="button">{{variants.label}}</button>

</div>

我意识到 ng-click 中的 myFilter 有点乱，但除此之外我无法用它来过滤 ng-repeat 的结果。 myFilter 变量 return 正确的结果 {target: 'roof'} （对于第一个按钮）。我是否正确地假设这是因为第一组按钮与第二组按钮在不同的范围内？

Answer 1

您实际上并没有在这里使用 2 个不同的范围。如果您一直在使用 2 个不同的控制器或不同的指令，那么您将得到 2 个不同的范围。您正在使用整个 angular 应用程序中通用的 $rootScope。

myFilter 不起作用的原因是因为 angular 无法正确解析 ng-click 中的表达式，最好你写一个方法（暴露给范围）并更改值myFilter 的方法。这是一个很好的实践，也是实现您想要做的事情的更好方法。

HTML

<button ng-click="setFilter(types)" class="btn btn-primary" type="button">{{types.label}}</button>

JS

$rootScope.setFilter = function(types) {
    $rootScope.myFilter = {target: types.type};
}

检查此 fiddle here，我已经根据您的代码创建了一个工作示例。

编辑

即使您的 target 变量是一个数组，也不应该有任何问题，因为 Anguar 的管道过滤器会处理它。我已经更新并创建了一个新的 fiddle 来展示它，检查它 here.

因此，如果目标是具有 2 个值的数组 - ['roof'、'attic']，将为两个按钮显示该特定元素。

单击 2 个范围之间的过滤器

Ng-click filter between 2 scopes

angularjs

angularjs-scope

angularjs-filter

angularjs-ng-click