Aurelia中的依赖/级联下拉列表

我想在Aurelia中创建相关下拉列表

我所说的依赖下拉列表的意思是，如果您单击第一个下拉列表中的某个项目，那么第二个下拉列表中的选项将根据您单击的内容进行过滤。如果你看看我的js小提琴，你会注意到，如果你在第一个下拉列表中选择丰田，第二个下拉列表中会填充丰田车型（花冠、凯美瑞等）。如果您在第一个下拉列表中选择本田，则第二个下拉列表将填充本田车型（雅阁、思域等）。你明白了

它非常简单，只需要很少的代码就可以在Angular中实现，我想知道在Aurelia中实现这一点是否也简单直接。我在奥雷利亚找不到更多关于如何做到这一点的资源。下面的提琴正好展示了我想要实现的目标（当然，除了我想用奥雷利亚而不是角度）。任何帮助都将不胜感激。谢谢

HTML:

<div ng-app="myApp" ng-controller="myController">
My Cars
<br />
<table>
  <thead>
    <tr>
      <td>Make</td>
      <td>Model</td>
    </tr>
  </thead>

  <tbody>
    <tr ng-repeat="car in myCars track by car.uid">
      <td>
        <select ng-model="car.MakeUID" ng-options="make.uid as make.name for make in makes" />
      </td>

      <td>
        <select
        ng-model="car.ModelUID"
        ng-options="model.uid as model.name for model in models | filter: { parentID: car.MakeUID } : true" />
      </td>
    </tr>
  </tbody>
</table>   
</div>

---

对于找到此线程的其他用户：

app.html

<template>
  <require from="./filter"></require>
  <table>
  <thead>
    <tr>
      <td>Make</td>
      <td>Model</td>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="car of myCars">
      <td>
        <select value.bind="car.MakeUID" change.delegate="resetModel(car)">
          <option value="0">select one of ...</option>
          <option repeat.for="make of makes" model.bind="make.uid">${make.name}</option>
        </select>
      </td>
      <td>
        <select value.bind="car.ModelUID">
          <option value="0">select one of ...</option>
          <option repeat.for="model of models | filter:'parentID':car.MakeUID" model.bind="model.uid">${model.name}</option>
        </select>
      </td>
    </tr> 
  </tbody>
</template>

filter.js

export class FilterValueConverter {
  toView(array, propertyName, filter_on) {
    return array.filter(i => i[propertyName] == filter_on);
  }
}

旧答案

我想这和你在奥雷利亚的角度代码是一样的：

<template>
  <require from="./filter"></require>
  <table>
  <thead>
    <tr>
      <td>Make</td>
      <td>Model</td>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="car of myCars">
      <td>
        <select value.bind="car.MakeUID" ref="selected_car">
          <option repeat.for="make of makes" value.bind="make.uid">${make.name}</option>
        </select>
      </td>

      <td>
        <select value.bind="car.ModelUID">
          <option repeat.for="model of models | filter:'parentID':selected_car.value">${model.name}</option>
        </select>
      </td>
    </tr> 
  </tbody>
</template>

---

我为您完成了解决方案，但您给了我一个非常关键的开始。我删除了make td中一个不必要的ref，添加了几个model.binds，并更改了过滤器匹配的内容

看看我的定稿要点，我从你的分出的

---

谢谢你，埃里克！这太棒了！我的有几个小功能，你的没有，但我相信我能找到它们。（1） 当您在“我的”中选择一个品牌时，模型将选择空白而不是第一个模型。（2） 当我的页面加载时，会显示我的汽车，即丰田花冠、丰田凯美瑞和福特福克斯。你的只是显示丰田雅尔一直在下降。但就像我说的，这是次要的，你几乎得到了全部。非常感谢！我会给它几天的时间，看看是否有更好的答案，然后我会接受你的答案。我试图提高你的答案，但它说我不能提高，直到我的声誉更高。我越想它，我越意识到我的车阵列没有被选中实际上是非常重要的。MyCars是来自数据库的数据。数据库中的值需要显示在页面加载的屏幕上。这很关键，我不认为我能接受一个没有这个答案的答案。不过，我想我可能是其中的一部分。如果你用下面的内容（我在选项标签中添加了model.bind=“make.uid”）替换了gist的app.html中的第一个td，那么页面加载时就会显示出这些模型……我就是无法显示这些模型${make.name}很抱歉，我起初以为您想知道如何引用元素。几分钟前，我们也做了同样的操作：-），在上次编辑和本次编辑之间，我们正在回家：-）仍然存在一个小问题。尝试选择toyata highlander，然后选择ford，然后它应该会重置。我不确定这是否只能从html中修复，但如果db中的汽车可以在js类中使用get和setters进行转换，则可以修复。一旦你设置了汽车，就重置模型。看看这个要点的最新版本：这就解决了上面的问题，你仍然需要在js中添加代码。这是我要点中一个有趣的行为…只是有时会发生…奇怪…我明天会研究这个问题，看看是否能找到更好的解决方法。你的重置功能现在确实是一个很好的修复方法。再次感谢你的帮助。

export class FilterValueConverter {
  toView(array, propertyName, filter_on) {
    return array.filter(i => i[propertyName] == filter_on);
  }
}

<template>
  <require from="./filter"></require>
  <table>
  <thead>
    <tr>
      <td>Make</td>
      <td>Model</td>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="car of myCars">
      <td>
        <select value.bind="car.MakeUID" ref="selected_car">
          <option repeat.for="make of makes" value.bind="make.uid">${make.name}</option>
        </select>
      </td>

      <td>
        <select value.bind="car.ModelUID">
          <option repeat.for="model of models | filter:'parentID':selected_car.value">${model.name}</option>
        </select>
      </td>
    </tr> 
  </tbody>
</template>

export class FilterValueConverter {
  toView(array, propertyName, filter_on) {
    return array.filter(i => i[propertyName] == filter_on);
  }
}