Question

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

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

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

Javasciprt part：

$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数组的第二个选择中显示。

像：

HTML中的

：

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>

并在您的控制器中添加以下代码：

$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'
   }
};

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

1 个答案: