2016-02-13 131 views
0

有一个简单的3个下拉选择器的形式,我有一个对象与预定义的数据与这个选择器的值。这个数据嵌套最多5根,这是一个简化的例子。角度嵌套选择器

如何在选择汽车制造商和汽车模型后,在第3个下拉列表中选择引擎列表。 大众>>高尔夫球>> 1.6升

http://jsfiddle.net/tkkonk78/

<div ng-app="myApp" ng-controller="AutoCtrl"> 
<select ng-model="selected.auto" 
     ng-options="a.automaker for a in data"> 
    <option value="">-- Automaker --</option> 
</select> 
<select ng-model="selected.models" 
     ng-options="b.name for b in selected.auto.models"> 
    <option value="">-- Model --</option> 
</select> 
<select ng-model="selected.engines" 
     ng-options="???"> 
    <option value="">-- Model --</option> 
</select> 

var myApp = angular.module('myApp', []); 

myApp.controller('AutoCtrl', 
['$scope', '$location', function ($scope, $location) { 

$scope.selected = {}; 

$scope.data = [ 
    { 
     "id" : "1", 
     "automaker" : "Volkswagen", 
     "models": [ 
      { "name": "Golf", 
       "engine": ["1.0 L", "1.6 L", "2.0 L"]}, 
      { "name": "Passat", 
       "engine": ["1.8 L", "2.6 L", "3.0 L"]}, 
      { "name": "Polo", 
       "engine": ["0.8 L", "1.0 L", "1.4 L"]} 
     ] 
    },{ 
     "id" : "2", 
     "automaker" : "Toyota", 
     "models": [ 
      { "name": "Venza", 
       "engine": ["1.2 L", "1.6 L", "2.0 L"]}, 
      { "name": "Corolla", 
       "engine": ["1.8 L", "2.6 L", "3.0 L"]}, 
      { "name": "Yaris", 
       "engine": ["0.6 L", "1.0 L", "1.4 L"]} 
      } 
     ] 
    } 
    ] 
}]); 

回答

1
<select ng-model="selected.engines" 
     ng-options="c for c in selected.models.engine"> 
    <option value="">-- Model --</option> 
</select>