如何将两个editable-select，e-ng选项绑定在一起？

Question

我正在试着制作一个汽车品牌 - >模型输入选项，但在选择第一个输入后，我无法更改第二个输入选项。

就像当我选择“福特”时，我只能在下一个输入中选择“焦点”或“嘉年华”。 当我选择'丰田'时，我只能在下一个输入中选择'凯美瑞'。

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/

感谢及时的帮助。

Answer 1

您可以通过观看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' 
    } 
};