Я борюсь с фильтрами Angularjs (вложенными кнопками). Я хочу иметь три раскрывающихся меню, где содержимое второго меню основывается на первом меню, текст для 3-го меню основывается на выборе меню 2. Текст, который должен отображаться, обозначается информацией «Уровень». Моя структура данных - структура JSON.Угловые JS вложенные кнопки
Моя идея:
1) для 1-го меню пользователю необходимо выбрать элемент, и на основании этого ID_уровня устанавливается на первые два номера идентификатора.
2) Основываясь на выборе, цикл foreach ищет значения для элементов Level-2, которые начинаются с тех же двух цифр на уровне ID-_.
3) Затем отображается содержимое второго меню.
По какой-то причине у меня возникают проблемы с доступом к выбору первого меню в моем коде, то есть, если я выбираю «Товары», то я не получаю никакого ответа для уровня 2. Код для уровня 3 не отображается.
HTML:
<select ng-model="View2.selection" >
<option value="">---Please select---</option>
<option ng-repeat="option in View2.data1" value="{{option}}">{{option}} </option>
</select><br>
<select ng-model="View2.selectionTwo" ng-change="View2.change(selection)">
<option value="">---Please select---</option>
<option ng-repeat="option in View2.data2" value="{{option}}">{{option}} </option>
</select>
AngularJS:
var values = [{ Name:'Goods', ID:'010000000000', Level:'1'},
{ Name:'Electronic good', ID:'010100000000', Level:'2'},
{ Name:'Coffee machine', ID:'010101000000', Level:'3'},
{ Name:'Water filter', ID:'010101030000', Level:'3'},
{ Name:'Non-electronic good', ID:'010100000000', Level:'2'},
{ Name:'Hair care', ID:'010101000000', Level:'3'},
{ Name:'Cream', ID:'010101030000', Level:'3'},
{ Name:'Non-Goods', ID:'020000000000', Level:'1'},
{ Name:'Games', ID:'020100000000', Level:'2'},
{ Name:'Toys', ID:'020101000000', Level:'3'}];
var id_level1, id_level2;
self.change = function(selection) {
/*Get selection from level 1 */
this.selection=selection;
/*Search in values for selected Item and get ID from level 1 */
angular.forEach(values, function(value, key){
if (value.Level=='1') {
if (value.Name==selection) {
id_level1=value.ID.substr(0,2)
}
}
});
/*Push all items for level 1 to data2 whose data is then displayed next drop down*/
self.data2=[];
angular.forEach(values, function(value, key){
var test=value.ID.substr(0,2);
if (value.Level=='2' && test==id_level1) {
self.data2.push(value.Name);
id_level2=value.ID.substr(0,4);
}
});
};
Кто-нибудь представление о том, как я мог установить это в рабочем порядке?