Question

我有一个制造和模型汽车的对象。每个品牌都有不同的型号。我正在尝试构建一个搜索表单，让用户改进他的搜索。当用户在选择中选择一个make时，make字段应该自动填充与此make相对应的类型。我就是这样做的：

 $scope.myForm = [
        {
            Make: 'AUDI',
            Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7']
        }, {
            Make: 'BMW',
            Type: ['316', '318', '320', '323', '325', '330']
        }, {
            Make: 'TOYOTA',
            Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux']
        }
    ]

<h2>Search</h2>
        <form class="form-inline">
            <div class="form-group">

                <label for="makeSelect">Make</label>
                <select ng-model="myForm.Make" class="form-control" ng-options="form.Make for form in myForm ">
                    <option value="" id="makeSelect">Select your make</option>
                </select>

                <label for="typeSelect">Type</label>
                <select ng-model="myForm.Type" class="form-control" ng-options="form.type for form in myForm.Type | filter:myForm.Make">
                    <option value="" id="typeSelect">Select your type</option>
                </select>

            </div>
        </form>

这不起作用，不知道吗？

Answer 1

首先，尝试使用有意义的名称。您通过使用错误名称并将选项和所选选项存储在同一位置而使您自己感到困惑。因此，让我们将可用的汽车存储在名为cars的变量中。然后让我们将选中的汽车存储在selectedCar：

中

$scope.cars = [
    {
        Make: 'AUDI',
        Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7']
    }, {
        Make: 'BMW',
        Type: ['316', '318', '320', '323', '325', '330']
    }, {
        Make: 'TOYOTA',
        Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux']
    }
];

和

<select ng-model="selectedCar" class="form-control" ng-options="car.Make for car in cars">
    <option value="" id="makeSelect">Select your make</option>
</select>

现在第二个选择应显示所选汽车的所有类型。所选汽车存储在selectedCar变量中。所选类型将存储在名为selectedType的变量中：

<select ng-model="selectedType" class="form-control" ng-options="type for type in selectedCar.Type">
     <option value="" id="typeSelect">Select your type</option>
</select>

如果您使用复数形式，代码也会更清晰：types而不是Type。

工作人员：http://plnkr.co/edit/Mm30HjQkgEOhJbZkyMic?p=preview

Answer 2

试试这段代码。

＆＃13;

 $scope.myForm = [
        {
            Make: 'AUDI',
            Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7']
        }, {
            Make: 'BMW',
            Type: ['316', '318', '320', '323', '325', '330']
        }, {
            Make: 'TOYOTA',
            Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux']
        }
    ]

＆＃13;

<h2>Search</h2>
        <form class="form-inline">
            <div class="form-group">

                <label for="makeSelect">Make</label>
                <select ng-model="myForm.Make" class="form-control" ng-options="form.Make for form in myForm ">
                    <option value="" id="makeSelect">Select your make</option>
                </select>

                <label for="typeSelect">Type</label>
                <select ng-model="myForm.Type" class="form-control" ng-options="type in myform.filter(function(e) { e.Make == myForm.Make })[0].Type">
                    <option value="" id="typeSelect">Select your type</option>
                </select>

            </div>
        </form>

＆＃13;

使用ng-options从数据对象中的数组中检索项目

2 个答案: