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

Question

我想在Aurelia中创建依赖下拉列表。

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

这非常简单，需要很少的代码才能在Angular中做到这一点，我想知道在Aurelia中这样做是否也很简单直接。在Aurelia，我无法找到如何做到这一点的资源。下面的提琴演示了我想要完成的事情（除了我想在Aurelia做，而不是Angular）。任何帮助将非常感激。谢谢！

https://jsfiddle.net/nhunt3/wjvvjwzx/

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> 

的JavaScript：

// the main (app) module 
var myApp = angular.module("myApp", []); 

angular.module('myApp', []).controller('myController', function($scope) { 
    $scope.makes = [ 
     {name:'Toyota', uid:1}, 
     {name:'Honda', uid:2}, 
     {name:'Ford', uid:3} 
    ]; 

    $scope.models = [ 
      {name:'Yaris', uid:1, parentID:1}, 
     {name:'Corolla', uid:2, parentID:1}, 
     {name:'Camry', uid:3, parentID:1}, 
     {name:'Highlander', uid:4, parentID:1}, 
     {name:'Accord', uid:5, parentID:2}, 
     {name:'Civic', uid:6, parentID:2}, 
     {name:'Pilot', uid:7, parentID:2}, 
     {name:'Focus', uid:8, parentID:3}, 
     {name:'Fiesta', uid:9, parentID:3}, 
     {name:'Fusion', uid:10, parentID:3}, 
     {name:'F-150', uid:10, parentID:3} 
    ]; 

    $scope.myCars = [ 
     {uid:1, MakeUID:1, ModelUID:2}, 
     {uid:2, MakeUID:1, ModelUID:3}, 
     {uid:3, MakeUID:3, ModelUID:8} 
    ]; 
}); 

Answer 1

对于发现这个线程其他用户：

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> 

app.js

export class App { 
    makes = [ 
     {name:'Toyota', uid:1}, 
     {name:'Honda', uid:2}, 
     {name:'Ford', uid:3} 
    ]; 

    models = [ 
     {name:'Yaris', uid:1, parentID:1}, 
     {name:'Corolla', uid:2, parentID:1}, 
     {name:'Camry', uid:3, parentID:1}, 
     {name:'Highlander', uid:4, parentID:1}, 
     {name:'Accord', uid:5, parentID:2}, 
     {name:'Civic', uid:6, parentID:2}, 
     {name:'Pilot', uid:7, parentID:2}, 
     {name:'Focus', uid:8, parentID:3}, 
     {name:'Fiesta', uid:9, parentID:3}, 
     {name:'Fusion', uid:10, parentID:3}, 
     {name:'F-150', uid:10, parentID:3} 
    ]; 

    myCars = [ 
     {uid:1, MakeUID:1, ModelUID:2}, 
     {uid:2, MakeUID:1, ModelUID:3}, 
     {uid:3, MakeUID:3, ModelUID:8} 
    ]; 

    resetModel(car) { 
     car.ModelUID = 0; 
    } 
} 

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> 

你也需要这个过滤器：

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

https://gist.run/?id=91b23375e0b73afe7f21825f67cfeabf

Answer 2

我完成你为你解决，但你给我就可以了非常关键的开端。我在你的make td中删除了一个不必要的ref，并添加了一个model.binds，并更改了你的过滤器匹配的内容。

看到我最后决定的要点，我从你的分叉点。

https://gist.run/?id=e0b9c401370a954b594ad2415d983099