Aurelia의 종속/계단식 드롭 다운

Question

Aurelia에서 종속 드롭 다운을 만들고 싶습니다.

종속 드롭 다운의 의미는 첫 번째 드롭 다운에서 항목을 클릭하면 두 번째 드롭 다운의 옵션이 클릭 한 내용에 따라 필터링됩니다. 내 js-fiddle을 보면, 첫 번째 드롭 다운에서 Toyota를 선택하면 두 번째 모델이 Toyota 자동차 모델 (Corolla, Camry 등)로 채워진다는 것을 알 수 있습니다. 첫 번째 드롭 다운에서 Honda를 선택하면 두 번째 모델은 Honda 모델 (Accord, Civic 등)로 채워집니다. 당신은 아이디어를 얻습니다.

매우 간단하며 Angular에서이 작업을 수행하는 데 필요한 코드가 거의 필요하지 않으며 Aurelia에서이 작업을 수행하는 것이 간단하고 직접적인지 궁금합니다. 나는 아우렐 리아 (Aurelia)에서이 일을하는 방법에 관한 자료를 많이 찾을 수 없었습니다. 아래의 바이올린은 정확히 무엇을하고 싶은지를 보여줍니다 (물론 Angular가 아니라 Aurelia에서 해보고 싶습니다). 어떤 도움이라도 대단히 감사 할 것입니다. 감사!

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> 

자바 스크립트 :이 스레드를 찾을 다른 사용자의

// 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을

,439,726,632 10

는 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

내가 당신을 위해 솔루션을 완료,하지만 당신은 그것을 나에게 매우 중요한 시작을했다 : 10,403,210는 그리고 당신은이 필터가 필요합니다. 나는 당신의 make td에서 불필요한 ref를 제거하고 몇 개의 model.binds를 추가하고 필터가 일치하는 것을 변경했습니다.

귀하의 의견을 요약 한 최종 요약을보십시오.

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