Выпадающий каскад взаимосвязанных предметов

0

Я хочу сделать раскрывающийся каскад с зависимым выбором, например здесь 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>

Он работает для сайта и страны, но не для серверов.

  • 1
    Можете ли вы попробовать свою собственную попытку и добавить дополнительные данные, чтобы проверить, что вы тестируете.
  • 0
    jsfiddle.net/tjp6q0gb
Показать ещё 2 комментария

1 ответ

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>

Лучший, Питер

  • 0
    Большое спасибо. Это работает, но у меня есть два веб-сайта, и когда я выбираю веб-сайт + страну + сервер, а затем меняю веб-сайт, исчезает страна, но не сервер. Как я могу сбросить его?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню