在Angular中动态选择元素过滤

Dynamic select element filtering in Angular

本文关键字：元素 过滤 选择 动态 Angular      更新时间：2023-09-26

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

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

我已经从Ward那里找到了一个很好的例子，说明如何创建一个更静态的函数来处理过滤，但我正在努力使其更动态，并且正在努力-

在我看来，我有一个可用战斗机的列表，应该按照战斗机的重量等级进行过滤，所以在ng重复的战斗中，每一场战斗都有一个重量等级选择器和两个战斗机选择器-

尝试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.的值

知道如何获得战斗的背景和我正在迭代的战士吗？还是一种更好的过滤方式？

战斗机结构

  1. 战斗机

    • Id
    • 名称
    • 权重类别Id
    • WeightClass（导航属性）

  2. 对抗

    • 第一战斗机
    • 第二战斗机
    • 权重类别Id
    • WeightClass（导航属性）

  3. 重量等级

    • Id
    • 重量
    • 说明
    • 全名

编辑

我已经能够毫无问题地过滤单打独斗的结果，问题是如何在ng repeat指令下的同一视图中，在每次战斗的基础上动态处理这一问题。我无法获得"战斗"answers"战士"的上下文来比较两个实体的"权重类"值是否匹配。

Filter可以将expression作为{fieldName:value}格式的Object。

您可以使用| 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>

演示

相关文章：