【发布时间】:2017-06-30 14:26:36
【问题描述】:
我正在尝试使用一对 Kendo 下拉列表来过滤 AngularJS 中的数据集。一种使用静态 ObservableArray 数据源按状态过滤数据集;另一个数据源是数据集“regionID”列中的一组不同值,也存储为 ObservableArray。当状态下拉列表更改时,区域下拉列表应该从新过滤的数据中重新加载区域列表。这可行,但选定的值最终会被清空,即使应该代表选定值的模型仍然具有正确的值,并且数据仍然被相同的值正确过滤。打开下拉列表,然后单击它会导致它按应有的方式显示该值。
这是 HTML 的样子:
<select name="filterByRegion" style="width: 180px;" class="form-control" ng-model="selectedRegion" ng-change="onRegionFilterChange(selectedRegion)" kendo-drop-down-list k-options="regionFilterOptions"></select>
<select name="accountStatus" style="width: 180px;" class="form-control" ng-model="status" ng-change="onAccountStatusChange(status)" kendo-drop-down-list k-options="accountStatusOptions"></select>
以下是控制器的两个“onChange”方法:
$scope.onAccountStatusChange = function(status) {
$scope.status = status;
updateRegionFilterList();
};
$scope.onRegionFilterChange = function(selectedRegion) {
$scope.selectedRegion = selectedRegion;
};
最后,这里是 updateRegionFilterList 方法:
var updateRegionFilterList = function () {
$scope.regions.empty();
angular.forEach($scope.accounts, function(account) {
if (account.reviewStatus === $scope.status) {
if ($scope.regions.indexOf(account.regionID) <= -1) {
$scope.regions.push(account.regionID);
}
}
});
$scope.regions.sort();
$scope.regions.unshift("Filter By Region:");
if ($scope.regions.indexOf(tempRegion) <= -1) {
$scope.selectedRegion = "Filter By Region";
}
};
我尝试了很多解决这个问题的方法,包括尝试保留和重新加载 selectedRegion 值,拼接出不需要的区域而不是清空 ObservableArray 等,并且我已经检查了调试器中的所有内容,并且所有值都是正确(也没有明显的竞争条件)。
有什么想法吗?
【问题讨论】:
标签: angularjs drop-down-menu kendo-ui html-select