我有3个下拉菜单（Clients，Locations，Dock），这三个信息来自数据库。首先我选择一个客户端，然后选择一个位置，然后选择一个停靠点;字段不支持多选项选择;每个字段只能选择一个选项。
例如.... 如果我选择Client1，则会填充Client1的Locations并显示在Locations下拉菜单字段中，然后当我选择一个Location（比如说Location1）时，Docks for Location1会显示在Docks字段中。
但是，如果我返回“客户端”字段并选择“客户端2”，则“位置”和“码头”字段不会刷新，也不会显示与Client2相关的数据。这些字段仍显示与Client1相关的信息。如何刷新字段以显示Client2的位置和位置2的码头？
我正在使用JSP和AngularJS
<div class="params">
<div class="blankLine20px"></div>
<div style='float: left; padding-right: 10px'>
<span style="padding: 2px 5px; font-weight: bold"> Select
Customer </span> <select style="width: 200px; z-index: 100;"
id="select-customer"
ng-options="value.label for (key, value) in customers"
ng-model="customer">
<option value=""></option>
</select>
</div>
<div style='float: left; padding-right: 10px'>
<span style="padding: 2px 5px; font-weight: bold"> Select
Location </span> <select style="width: 200px; z-index: 100;"
id="select-location"
ng-options="value.label for (key, value) in locations"
ng-model="location">
<option value=""></option>
</select>
</div>
<div style='float: left; padding-right: 10px'>
<span style="padding: 2px 5px; font-weight: bold"> Select
Dock </span> <select style="width: 200px; z-index: 100;"
id="select-dock"
ng-options="value.label for (key, value) in docks"
ng-model="dock">
<option value=""></option>
</select>
</div>
<div style='float: left; padding-right: 10px'>
<span style="padding: 4px 5px; font-weight: bold"> Select
Period to View </span> <input type="text" id="dateRange"
ng-model="dateRange" class="text" />
</div>
<div style='float: left; padding-right: 10px'>
<input class="fancy-button submit" type="button" value="View"
id="buttonSetPeriod" />
</div>
<div class="clear"></div>
</div>
这是controllers.js文件......
<pre>
var baseCtrl = application.controller('baseCtrl', [
'$location',
'$element',
'$rootScope',
'$scope',
'baseService',
'$contextService',
'$timeout',
function($location, $element, $rootScope, $scope, baseService, $contextService, $timeout) {
var url = $location.absUrl();
$rootScope.currentUrl = url;
var splitUrl = url.split('/');
var baseUrl = '';
var brk = 2;
if (splitUrl.length > 3) {
brk = 3;
}
var i = 0;
try {
splitUrl.forEach(function(part) {
baseUrl += part + '/';
if (i === brk)
throw Exception();
i++;
});
}
catch (e) {
}
baseUrl = baseUrl.replace('index.php', '');
$rootScope.baseUrl = baseUrl;
// Setting default to null.
$scope.customer = null;
// Calling service for customer population. service.js =>
// $contextService
var customers = $contextService.getCustomers();
customers.$promise.then(function(data) {
console.log(data);
$scope.customers = data;
$timeout(function() {
$('#select-customer').chosen();
}, 500);
});
$scope.$watch('customer', function(nv, ov) {
if (nv) {
var locations = $contextService.getLocations(nv);
locations.$promise.then(function(data) {
console.log(data);
$scope.locations = data;
$timeout(function() {
$('#select-location').chosen();
}, 500);
});
}
});
$scope.$watch('location', function(nv, ov) {
if (nv) {
var docks = $contextService.getDocks(nv);
docks.$promise.then(function(data) {
console.log(data);
$scope.docks = data;
$timeout(function() {
$('#select-dock').chosen();
}, 500);
});
}
});
}
]
);
</pre>
这是service.js文件。这是客户，位置，码头的service.js文件......
<pre>
var baseService = application.service('baseService', [ '$location',
'$rootScope', '$injector', function($location, $rootScope, $injector) {
var _extended = [];
return {
setFormData : function() {
$rootScope.dateRange = $("#dateRange").val();
$rootScope.selectedDock = $("#dropdownDocks").val();
$rootScope.formData = {
selectedDock : $rootScope.selectedDock,
dateRange : $rootScope.dateRange
};
},
Extended : _extended
};
} ]);
var dashboardSvc = application.service('dashboardSvc', [ 'baseService',
'$rootScope', function(baseService, $rootScope) {
return {
};
} ]);
var kpiSvc = application.service('kpiSvc', [ 'baseService', '$rootScope',
'$resource', function(baseService, $rootScope, $resource) {
var $kpi = $resource('kpi/:p1/:p2', {
p1 : '@p1',
p2 : '@p2'
}, {
savem : {
method : 'POST',
isArray : true
}
});
this.Get = function(form) {
if (form !== null) {
return $kpi.save({
p1 : form.groupType,
p2 : form.rangeType
}, form, function(o, head) {
console.log(o);
});
} else {
return null;
}
};
} ]);
var $contextService = application.service('$contextService', [ '$resource',
function($resource) {
var $context = $resource('./context/:param1/:param2', {
param1 : '@param1',
param2 : '@param2'
}, {
savem : {
method : 'POST',
isArray : true
}
});
this.getCustomers = function() {
return $context.get({
param1 : 'customers'
}, function(o, head) {
}, function(o, head) {
console.log(o);
});
};
this.getLocations = function(customer) {
return $context.save({
param1 : 'locations'
}, customer, function(o, head) {
}, function(o, head) {
console.log(o);
});
};
this.getDocks = function(location) {
return $context.save({
param1 : 'docks'
}, location, function(o, head) {
}, function(o, head) {
console.log(o);
});
};
this.getSubDocks = function(dock) {
return $context.save({
param1 : 'subdocks'
}, dock, function(o, head) {
}, function(o, head) {
console.log(o);
});
};
} ]);