Aurelia的依赖/级联下拉列表

发布时间：2020-12-14 04:53:39 所属栏目：百科来源：网络整理

导读：我想在Aurelia创建依赖的下拉菜单. 依赖下拉列表的含义是,如果您单击第一个下拉列表中的项目,则第二个下拉列表中的选项将根据您单击的内容进行过滤.如果你看看我的js-fiddle,你会注意到如果你在第一个下拉列表中选择丰田,那么第二个就是丰田车型(卡罗拉,凯美

我想在Aurelia创建依赖的下拉菜单.

依赖下拉列表的含义是,如果您单击第一个下拉列表中的项目,则第二个下拉列表中的选项将根据您单击的内容进行过滤.如果你看看我的js-fiddle,你会注意到如果你在第一个下拉列表中选择丰田,那么第二个就是丰田车型(卡罗拉,凯美瑞等).如果你在第一个下拉列表中选择本田,第二个用本田车型(雅阁,思域等)填充.你明白了.

它非常简单,只需很少的代码就可以在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,{name:'Camry',uid:3,{name:'Highlander',uid:4,{name:'Accord',uid:5,parentID:2},{name:'Civic',uid:6,{name:'Pilot',uid:7,{name:'Focus',uid:8,parentID:3},{name:'Fiesta',uid:9,{name:'Fusion',uid:10,{name:'F-150',parentID:3}
    ];

  $scope.myCars = [
        {uid:1,MakeUID:1,ModelUID:2},{uid:2,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:3}
    ];

    models = [
        {name:'Yaris',parentID:3}
    ];

    myCars = [
        {uid:1,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中的Angular代码相同：

<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,filter_on) {
    return array.filter(i => i[propertyName] == filter_on);
  }
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!