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变量确实返回正确的结果{target: 'roof'}（对于第一个按钮）。我是否正确地假设它是因为第一组按钮与第二组按钮的范围不同？

Answer 1

这里你并没有真正使用2个不同的范围。如果您使用了2个不同的控制器或不同的指令，那么您将拥有2个不同的范围。您正在使用$ 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};
}

检查这个小提琴here，我已根据您的代码创建了一个工作示例。

修改

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

因此，如果target是一个具有2个值的数组 - ['roof'，'attic']，那么这两个按钮将显示该特定元素。

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

1 个答案: