извлечение элементов из массива в объекте данных с помощью ng-options

0

У меня есть объект автомобилей с маркой и моделью. У каждой модели есть разные модели. Я пытаюсь создать форму поиска, которая позволит пользователю уточнить его поиск. Когда пользователь выбирает 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>

Это не работает, любая идея?

Теги:

2 ответа

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

Поделиться
  • 0
    Спасибо за ваш быстрый ответ. Не могли бы вы объяснить мне одну вещь, пожалуйста? Массив типов находится в объекте cars, как он попал в объект selectedCar?
  • 0
    Вот что такое ng-модель: она позволяет сохранить выбранную опцию (или введенный текст в случае ввода или текстовой области) в переменной области видимости.
Показать ещё 1 комментарий
0

Попробуйте этот код.

 $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="type in myform.filter(function(e) { e.Make == myForm.Make })[0].Type">
                    <option value="" id="typeSelect">Select your type</option>
                </select>

            </div>
        </form>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню