2016-03-13 107 views
0

我正在与Angularjs过滤器(嵌套按钮)挣扎。 我想要有三个下拉菜单,其中第二个菜单的内容基于第一个菜单,第三个菜单的文本基于菜单2的选择。应该显示的文本由“Level”信息指示。 我的数据结构是JSON结构。角JS嵌套按钮

我的想法是:
1)第一个菜单用户需要选择一个项目,并在此基础上将ID_level设置为ID的前两个数字。
2)根据选择,foreach循环搜索在ID-_level处以相同2位开头的Level-2项目的值。
3)然后显示第二个菜单的内容。

由于某些原因,我有问题可以访问我的代码中的第一个菜单的选择,即如果我选择“Goods”,那么我没有得到任何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); 
     } 
    }); 
}; 

大家有一个想法,我怎么能在工作方式设置呢?

回答