Question

我正在使用Aurelia（Cordova，Typescript，HTML5和Bootstrap）编写移动应用程序，我需要进行分层选择，其中从一个SELECT列表中选择过滤下一个SELECT列表中的选项。有谁知道在Aurelia如何做到这一点？带有绑定的代码如下。 selRatedItems中的列表需要按selCategories中选择的内容进行过滤。谢谢你的帮助。

                <div class="row">
                    <div class="form-group form-group-sm">
                        <label for="selCategory" class="col-sm-2 control-label">Category</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="selCategory" value.bind="selectedCategory" required>
                                <option value="">Select a category...</option>
                                <option repeat.for="option of categories" model.bind="option">${option.name}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group form-group-sm">
                        <label for="selRatedItem" class="col-sm-2 control-label">Rated Item</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="selRatedItem" value.bind="selectedItem" required>
                                <option value="">Select an item...</option>
                                <option repeat.for="option of selectedCategory.rateditems" model.bind="option.rateditems.id">${option.rateditems.name}</option>
                            </select>
                        </div>
                    </div>
                </div>

Answer 1

以下是我解决这个问题的方法......

首先，我必须在视图模型中添加一个计算属性，该属性基于从上面绑定到selCategory SELECT列表的属性。

添加了导入声明：

import { computedFrom } from 'aurelia-framework';

添加了属性：

@computedFrom('selectedCategory')
    get rateditems() {
        if (this.selectedCategory && this.selectedCategory.rateditems) {
            return Object.keys(this.selectedCategory.rateditems).map(key => this.selectedCategory.rateditems[<any>key]);
        }
        else {
            var array: any[] = [];
            return array;
        }
    }

然后，我将要过滤的SELECT列表（在本例中为selRatedItem）绑定到计算属性。

新绑定的SELECT列表：

                    <div class="row">
                        <div class="form-group form-group-sm">
                            <label for="selRatedItem" class="col-sm-2 control-label">Rated Item</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="selRatedItem" value.bind="selectedItem" required>
                                    <option value="">Select an item...</option>
                                    <option repeat.for="item of rateditems" model.bind="item.id">${item.name}</option>
                                </select>
                            </div>
                        </div>
                    </div>

使用Aurelia进行分层选择

1 个答案: