Kendo DropDownList未显示所选项目

时间:2017-06-30 14:26:37

标签: angularjs drop-down-menu kendo-ui html-select

我正在尝试使用一对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等等,我已经检查了调试器中的所有内容,所有的值都是正确(没有明显的竞争条件)。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我明白了。我在下拉列表中混合了剑道和角度配置,并依赖于角度过程来更新数据,这并没有正确更新Kendo MVVM。将它转换为纯粹的剑道就可以了。