JasonHsieh JasonHsieh - 3 months ago 14
Javascript Question

How to bind two editable-select , e-ng-options together?

I'm trying to make a car Brands -> Models input options but I can't change the 2nd input options after I selected the 1st input.

Like when I select "Ford" then I can only select 'Focus' or 'Fiesta' at the next input.
And when I select 'Toyota' then I can only select 'Camry' at the next input.

http://jsfiddle.net/NfPcH/16483/ is the link I didn't finish.

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


Update:

After the good answer below , I tried to do it in xeditable and it worked well.
And there are two points to notice in xeditable.
1. e-ng-change instead of ng-change
2. pass the $data into the function then get the selected data.

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

Thank for the prompt help.

Answer

You can achieve this by watching car.brand and create a new array selectedBrandModel for selected brand model by filter and shown in second select from selectedBrandModel array.

like:

in 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>

and in your controller add this code:

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