角度下拉樹結構

Question

我有這個工作的jsfiddle： 第二個工作的小提琴

在這里，我將從ng-repeat創建的每輛車的第一個下拉菜單中分配一個品牌，然后從第二個下拉菜單中分配一個模型。 這很好。

但是我必須添加第三級（類型），如下面的jsfiddle所示： 第三級不起作用

我知道問題出在哪里，但我不知道如何修復。 這是未定義的：

$scope.cars[index].model.model

有什么建議么？

謝謝。

Answer 1

格式化JSON對象的方式很難閱讀，也不直觀。 我建議將其格式化，以便您可以通過cars.brands[0].models[0].types[0]輕松進入汽車選擇。 這樣，您可以毫不費力地使用ng-options 。 參見工作提琴： https : //jsfiddle.net/udr9dksa/1/

 var app = angular.module("app", []); app.controller("MainCtrl", ["$scope", function($scope) { $scope.selectedBrand = {}; $scope.selectedModel = {}; $scope.selectedType = {}; $scope.cars = { brands: [{ id: 1, name: "audi", models: [{ id: 1, name: 'audiA', types: [{ id: 1, name: 'type audi A1' }, { id: 2, name: 'type audi A2' }] }, { id: 2, name: 'audiB', types: [{ id: 1, name: 'type audi B1' }, { id: 2, name: 'type audi B2' }] }] }, { id: 2, name: "bmw", models: [{ id: 1, name: 'bmwA', types: [{ id: 1, name: 'type bmw A1' }, { id: 2, name: 'type bmw A2' }] }, { id: 1, name: 'bmwB', types: [{ id: 1, name: 'type bmw B1' }, { id: 2, name: 'type bmw B2' }] }] }] }; } ]); 

 <div ng-app="app" ng-controller="MainCtrl"> <h4>Select a brand</h4> <select ng-model="selectedBrand" ng-options="brand as brand.name for brand in cars.brands"> </select> <h4>Select a model</h4> <select ng-model="selectedModel" ng-options="model as model.name for model in selectedBrand.models"> </select> <h4>Select a type</h4> <select ng-model="selectedType" ng-options="type as type.name for type in selectedModel.types"> </select> <h3>You have selected</h3> <pre>{{selectedType | json}}</pre> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 

Answer 2

我會稍微更改您的數據結構，因此您無需使用ng-change處理程序做任何事情。

在品牌模型中添加eveything之后，您就可以輕松使用ng-options 。 如果您使用的是Mongoose和MongoDB ，則可以為模型使用嵌入式文檔，並且可以為類型使用規范化數據（僅存儲來自types集合的索引）。 （在演示中，所有內容都嵌入到品牌中，以使演示更易於理解。）

請看下面的演示或小提琴 。

 angular.module('demoApp', []) .controller('mainController', MainController); function MainController($window) { var vm = this; vm.show = function(car) { if (!car.brand || !car.model || !car.type) return; // all fields required $window.alert('Selected brand ' + car.brand.name + ' - model: ' + car.model.name + ' - type: ' + car.type.name); }; vm.cars = [{ id: 0, name: 'car 1' }, { id: 1, name: 'car 2' }, { id: 2, name: 'car 3' }]; vm.brands = [{ id: 0, name: 'Audi', models: [{ id: 0, name: 'Audi 1', types: [{ id: 0, name: 'cabrio' }, { id: 1, name: 'combi' }] }, { id: 1, name: 'Audi 2', types: [{ id: 0, name: 'limosine' }, { id: 1, name: 'van' }] }, { id: 2, name: 'Audi 3', types: [{ id: 0, name: 'mini van' }, { id: 1, name: 'combi' }] }] }, { id: 1, name: 'BMW', models: [{ id: 0, name: 'BMW 1', types: [{ id: 0, name: 'cabrio' }, { id: 1, name: 'combi' }] }, { id: 1, name: 'BMW 2', types: [{ id: 0, name: 'limosine' }, { id: 1, name: 'van' }] }, { id: 2, name: 'BMW 3', types: [{ id: 0, name: 'mini van' }, { id: 1, name: 'combi' }] }] }]; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="mainController as mainCtrl"> <div ng-repeat="car in mainCtrl.cars"> {{car.name}} <label>brand</label> <select ng-model="car.brand" ng-options="brand as brand.name for brand in mainCtrl.brands"> </select> <label>model</label> <select ng-model="car.model" ng-options="model as model.name for model in car.brand.models"> </select> <label>type</label> <select ng-model="car.type" ng-options="type as type.name for type in car.model.types"> </select> <button ng-click="mainCtrl.show(car)"> show </button> </div> <h2> current cars model (debugging): </h2> <pre> {{mainCtrl.cars | json : 2}} </pre> </div> 

Answer 3

無需更改您的數據結構，只需更改DOM即可使您的功能完美運行。

僅更改您的第二個和第三個選擇標簽。 用於第二個ng-change函數調用。 例如： ng-change="loadTypes($index, brand.model.model)" 。 對於第三個，使用cars[$index].models[$index].types代替cars[$index].models.types表示在特定模型數組中分配以及相關更改控制器功能。

可以嘗試：

HTML：

<label>model</label>
    <select ng-model="brand.model" ng-options="caras car.model for car in cars[$index].models"  ng-change="loadTypes($index, brand.model.model)"><option value="">select</option></select>

<label>type</label>
    <select ng-model="car.brand.model.type" ng-options="car as car.type for car in cars[$index].models[$index].types"><option value="">select</option></select>

並且您的功能應為：

$scope.loadModels = function(index){
    $scope.cars[index].models = $scope[$scope.cars[index].brand.name];
}
$scope.loadTypes = function(index, brandModel){
    $scope.cars[index].models[index].types = $scope[brandModel];
}