Question

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

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

我找到了一个关于如何创建一个更静态的函数来处理过滤的好例子，但我试图让它变得更有活力并且正在努力 -

在视图中我有一个可用的战士列表，应该通过战斗的重量级别进行过滤，因此对于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的值。

任何想法如何获得战斗的背景和我正在迭代的战斗机？或者更好的方法来过滤这种方式？

战士结构

战斗机
- 编号
- 名称
- WeightClassId
- WeightClass（导航属性）
扑灭
- FirstFighter
- SecondFighter
- WeightClassId
- WeightClass（导航属性）
WeightClass
- 编号
- 重量
- 描述
- 全名

修改

我已经能够毫无问题地过滤单个战斗的结果，问题是如何在ng-repeat指令下的同一视图中基于每个战斗动态处理这个。我无法得到'战斗'和'战斗机'的背景来比较两个实体的'权重等级'值是否匹配。

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>来实现您的目标。

{{1}}

的 Demo

Angular中的动态选择元素过滤

1 个答案: