javascript - 联锁项目的下拉级联

Question

我想做一个带有依赖选择的下拉级联，就像这里 http://jsfiddle.net/6eCZC/1/ .

但是我有一个表，其中的项目位于表的一部分中。

像这样:

$scope.option = [
{id: 1, name: "WebSite", 
  countries: [{id: 1, name: "Country", 
    servers: [{id: 1, name: "Server1"}, 
      {id: 2, name: "Server2"},
      {id: 3, name: "Server3"}]}]}];
  $scope.selectedRequest = {};
  $scope.selectedRequest.option = $scope.option[0];

和我的 HTML

 <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
<select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.option.countries">
 </select>
<select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.option.countries.servers">
  </select>

它适用于站点和国家/地区，但不适用于服务器。

Answer 1

选择时使用先前选择的对象的内容。

这是工作代码(带有一些新选项):

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

app.controller('myController', function($scope) {
  $scope.option = [{
    id: 1,
    name: "WebSite",
    countries: [{
      id: 1,
      name: "Switzerland",
      servers: [{
        id: 1,
        name: "Sw Server1"
      }, {
        id: 2,
        name: "Sw Server2"
      }, {
        id: 3,
        name: "Sw Server3"
      }]
    }, {
      id: 2,
      name: "Hungary",
      servers: [{
        id: 1,
        name: "Hu Server1"
      }, {
        id: 2,
        name: "Hu Server2"
      }]
    }]
  }];

  $scope.selectedRequest = {};
  $scope.selectedRequest.option = $scope.option[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
    <select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.site.countries"></select>
    <select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.country.servers"></select>
  </div>
</div>

最好，彼得