2016-02-13 132 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>