Блог

Я хотел бы создать зависимые выпадающие списки в Aurelia.

Что я подразумеваю под зависимыми выпадающими списками, так это то, что если вы нажмете элемент в первом выпадающем списке, то параметры во втором выпадающем списке будут отфильтрованы на основе того, что вы нажмете. Если вы посмотрите на мой js-fiddle, вы заметите, что если вы выберете Toyota в первом выпадающем списке, второй заполняется моделями автомобилей Toyota (Corolla, Camry и т. Д.). Если вы выберете Honda в первом выпадающем списке, второй заполнится моделями Honda (Accord, Civic и т. Д.). Вы поняли идею.

Это очень просто и требует очень мало кода, чтобы сделать это в 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}
    ];
});
  

Для других пользователей, которые находят этот поток:

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);
  }
}
  

старый ответ

Я думаю, что это делает то же самое, что и ваш угловой код в Aurelia:

 <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

Я закончил ваше решение за вас, но вы дали мне очень критическое начало. Я удалил ненужную ссылку в вашем make td и добавил пару model.binds и изменил то, что соответствует вашему фильтру.

Посмотрите мою окончательную суть, которую я разветвил на вашу.

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