Я хочу сделать раскрывающийся каскад с зависимым выбором, например здесь 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>
Он работает для сайта и страны, но не для серверов.
Используйте ранее выбранное содержимое объекта при выборе.
Вот рабочий код (с некоторыми новыми опциями):
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>
Лучший, Питер