如何將兩個editable-select，e-ng選項綁定在一起？

我正在試着製作一個汽車品牌 - >模型輸入選項，但在選擇第一個輸入後，我無法更改第二個輸入選項。如何將兩個editable-select，e-ng選項綁定在一起？

就像當我選擇「福特」時，我只能在下一個輸入中選擇「焦點」或「嘉年華」。當我選擇'豐田'時，我只能在下一個輸入中選擇'凱美瑞'。

http://jsfiddle.net/NfPcH/16483/是我沒有完成的鏈接。

Javasciprt部分：

$scope.brands = [ 
{value: 'Ford', text: 'Ford'}, 
{value: 'Toyota', text: 'Toyota'}, 
{value: 'Nissan', text: 'Nissan'}, 
]; 



$scope.models = [ 
{brand:"Ford",models:['Focus','Fiesta']}, 
{brand:"Toyota",models:['Camry']}, 
{brand:"Nissan",models:['Siesta','Sentra']} 
];

更新：

下很好的答案後，我試圖做到這一點在xeditable，效果不錯。在xeditable中有兩點要注意。 1. e-ng-change代替ng-change 2.將$數據傳入函數，然後獲取選定的數據。

http://jsfiddle.net/NfPcH/16491/

感謝及時的幫助。

來源

2016-08-23 JasonHsieh

結賬此[鏈接]（http://stackoverflow.com/questions/ 28345392 /如何對節目依賴性選盒選項功能於角JS）。這與你的問題類似，你也可以檢查這個[plunker]（http://plnkr.co/edit/Vub4jO?p=preview） –

感謝隊友。該頁面中的代碼運行良好。 – JasonHsieh

您可以通過觀看car.brand並通過過濾器爲選定品牌型號創建一個新陣列selectedBrandModel來實現此目的，並在selectedBrandModel陣列中進行第二次選擇。

，如：

Brand: 
    <a href="#" buttons="no" editable-select="car.brand" e-ng-options="s.value as s.text for s in brands" > 
    {{ car.brand }} 
    </a> 
    <br><br> 
    Model: 
    <a href="#" buttons="no" editable-select="car.model" e-ng-options="s as s for s in selectedBrandModel"> 
    {{ car.model }} 
    </a>

，並在控制器中添加以下代碼：：

在HTML

$scope.selectedBrandModel = []; 

$scope.$watch("car.brand", function(newValue, oldValue) { 
    if(newValue !== oldValue) $scope.changeModel(); 
}); 

$scope.changeModel = function() { 
    var brandModels = $filter('filter')($scope.models, {brand: $scope.car.brand}); 
    if(brandModels.length) { 
     $scope.selectedBrandModel = brandModels[0].models; 
     $scope.car.model = $scope.selectedBrandModel[0] || 'Select One' 
    } 
};

來源

2016-08-23 11:01:15

它工作得很好。謝謝。 ng-change是我沒有使用過的porint。謝謝。 http://jsfiddle.net/NfPcH/16489 – JasonHsieh

如何將兩個editable-select，e-ng選項綁定在一起？

回答

相關問題