javascript - Angular 中的动态选择元素过滤

Question

我正在使用 ng-repeat 迭代对象以在 Angular 中显示，并且每个对象都包含一个包含对象属性的选择元素。

我想根据每个对象的其他属性的选定值过滤选项(哇，这比我想象的更难解释)但问题是这些是 Breeze 实体，如果我使用传统方法 Angular由于 Breeze 实体的循环性质，提供堆栈抛出溢出异常。

我找到了 Ward 的一个很好的例子，说明如何创建一个更静态的函数来处理过滤，但我试图让它更动态并且正在努力 -

在 View 中，我有一个可用战士列表，应该按战斗的体重等级过滤，因此对于 ng-repeat 的战斗中的每场战斗，都有一个体重等级选择器和两个战斗机选择器 -

尝试 1 -

<select
    ng-model="fight.firstFighter"
    ng-options="f.fullName for f in fighters | filter: fighterFilter">
</select>

<select
    ng-model="fight.weightClass"
    ng-options="w.fullName for w in weightClasses">
</select>

$scope.fighterFilter = function (fighter) {
    var fight = ???;
    return fight.weightClass ?
        -1 != fighter.weightClass === fight.weightClass :
        true;
};

我试过如图所示不发送任何内容，但问题是它只在遍历每个可用的战斗机时发送战斗机的值，所以我无法获得 fight.weightClass 的值。

知道如何获取 fight 的上下文和我正在迭代的战斗机吗？或者以这种方式进行过滤的更好方法？

战斗机结构

1. 战士

   • 身份证
   • 姓名
   • WeightClassId
   • WeightClass(导航属性)

2. 战斗

   • 第一战士
   • 第二战斗机
   • WeightClassId
   • WeightClass(导航属性)

3. 体重等级

   • 身份证
   • 体重
   • 描述
   • 全名

编辑

我已经能够毫无问题地过滤单场战斗的结果，问题是如何在 ng-repeat 指令下的同一 View 中逐场动态处理此问题。我无法获得“战斗”和“战斗机”的上下文来比较两个实体的“重量级”值是否匹配。

Answer 1

过滤器可以将expression作为Object，格式为{fieldName:value}。

您可以使用| filter: {WeightClassId:fight.WeightClass.Id} 实现你想要的。

<li ng-repeat="fight in fights">
    <h4>{{ fight.number }}</h4>

    Weight Class:
    <select ng-model="fight.WeightClass" ng-options="w.Name for w in weightClasses"></select>{{ fight.WeightClass.Name }}

    <br/>First Fighter
    <select ng-model="fight.FirstFighterId" ng-options="f.Name for f in fighters | filter: {WeightClassId:fight.WeightClass.Id}"></select><span>{{ fight.FirstFighter.Name }}</span>

    <br/>Second Fighter
    <select ng-model="fight.SecondFighterId" ng-options="f.Name for f in fighters| filter: {WeightClassId:fight.WeightClass.Id}"></select><span>{{ fight.SecondFighter.Name }}</span>
</li>

Demo