2016-03-13 105 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); 
     } 
    }); 
}; 

大家有一個想法,我怎麼能在工作方式設置呢?

回答