在Angular UI Grid中,可以通过自定义筛选器的方式来从数据库或后端填充下拉筛选器中的真实数据。下面是一个示例代码,演示如何实现这个功能:
首先,在HTML模板中定义一个自定义的筛选器,并将其绑定到列定义中的filterHeaderTemplate
属性上:
在上述代码中,我们使用了一个select
元素来作为下拉筛选器,通过ng-options
指令绑定到一个名为dropdownOptions
的数据源。
接下来,在相关的控制器中,我们需要定义dropdownOptions
数据源,并从数据库或后端获取真实数据。这里我们使用$http
服务来发送一个HTTP请求获取数据,并将其赋值给dropdownOptions
变量:
angular.module('myApp').controller('GridController', function($scope, $http) {
$scope.dropdownOptions = [];
$http.get('/api/dropdownOptions').then(function(response) {
$scope.dropdownOptions = response.data;
});
// 其他控制器逻辑...
});
在上述代码中,我们使用了$http.get
方法来发送一个GET请求到/api/dropdownOptions
接口,并在成功回调函数中将返回的数据赋值给dropdownOptions
变量。
最后,在列定义中的filterHeaderTemplate
属性中使用col.filters[0].term
来绑定筛选器的值。这将根据用户选择的下拉选项来筛选数据。
$scope.gridOptions = {
// 其他网格选项...
columnDefs: [
{ field: 'name', displayName: 'Name', filterHeaderTemplate: 'path/to/your/template.html' },
// 其他列定义...
]
};
通过以上代码,我们就可以在Angular UI Grid的下拉筛选器中动态填充真实数据,并根据用户选择的选项来筛选数据。