基於第一個填充第二個下拉列表 - AngularJS

我有兩個select框。第一個包含報告名稱，第二個包含格式選項（應根據報告名稱select框動態填充）。基於第一個填充第二個下拉列表 - AngularJS

我想填充格式select與相應格式的框當我select報告名稱。

我已經定義格式中的陣列報告如下

$scope.reportOptions = [{ 
    "reportName": "Cash Position", 
    "reportValue": "Cash Position Report", 
    "formats": ["CSV", "PDF", "XLS"] 
}, { 
    "reportName": "Detail Report", 
    "reportValue": "Detail Report", 
    "formats": ["CSV", "PDF", "XLS"] 
}, { 
    "reportName": "Reconciliation Report", 
    "reportValue": "Reconciliation Report", 
    "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"] 
}, { 
    "reportName": "Summary Report", 
    "reportValue": "Summary Report", 
    "formats": ["BAI", "CSV", "PDF", "XLS"] 
}, { 
    "reportName": "Sweep Report", 
    "reportValue": "Sweep Report", 
    "formats": ["CSV", "PDF", "XLS"] 
}, { 
    "reportName": 'Custom Report Name', 
    "reportValue": 'CustomReport', 
    "formats": ["BAI", "CSV", "PDF", "QBO", "QFX", "XLS"] 
}];

我的過濾器是如下

.filter('exportTypeFilter', function() { 
    return function(input, selectedreport, scope) { 
     var selectedReportFormatOptions = []; 
     var output = $.grep(scope.reportOptions, function(e) { 
      return e["reportValue"] == selectedreport; 
     }); 
     selectedReportFormatOptions = output[0]["formats"]; 
     return selectedReportFormatOptions; 
    }; 
})

的值沒有得到填充到select框。我在做什麼錯？

FULL EXAMPLE

來源

2016-09-07 Nishant123

您的exportTypeFilter過濾器正在返回undefined值。當它首次運行時，過濾器中的參數selectedreport以""（空字符串）的形式傳遞，因此var output的計算結果爲undefined。

新增ng-init="interactor.parameters.reportName = 'Cash Position Report'"在第一select箱來解決這個問題

更新小提琴：https://jsfiddle.net/nwn838yb/5/

來源

2016-09-08 11:33:33 user3433164

我已經修改了你的jsfiddle一點。

看一看：https://jsfiddle.net/nwn838yb/1/

基本上你甚至不需要一個過濾器，以達到你想要的東西。您需要一個與您的範圍相關的變量，其中將存儲來自第一個選擇的選定對象。爲此，我已將$scope.selectedReport = {};添加到您的範圍。

然後，在您的選擇中，您需要遍歷$scope.reportOptions並將用戶選擇保存到selectedReport。要做到這一點，你只需定義ng-model="selectedReport" - 它告訴用戶選擇將存儲在哪個變量中，並告知「請通過reportOptions迭代，選項只顯示reportName，如果用戶選擇某些內容，則只保存選定的對象」。

例如，用戶選擇了「現金頭寸」。這個對象將被存儲在selectedReport：

{ 
    "reportName":"Cash Position", 
    "reportValue":"Cash Position Report", 
    "formats":["CSV","PDF","XLS"] 
}

使用這個對象，你可以填充，並通過selectedReport.format迭代類似於第一選擇。

來源

2016-09-07 07:20:34

這是偉大的，但你能添加一些解釋你的答案，而不是僅僅依賴於OP淘小提琴。 – Ankh

@Ankh完成！添加解釋給我的答案。 –

您在報告'選擇「框中選擇''選項值'會返回一個我不想要的對象。 'reportOptions'中的'option text'和'option value'具體給出了兩個不同的屬性作爲'reportName'和'reportValue'。看看你的價值在這裏：https://jsfiddle.net/Kunalh/nwn838yb/2/ – Nishant123

基於第一個填充第二個下拉列表 - AngularJS

回答

相關問題