Header ui-grid 中的下拉菜单 AngularJS

Question

我正在尝试为 ui-grid 中的字段之一获取 header 中的下拉值。对于同一个字段，每一行的下拉列表都可以正常工作。基于 header 下拉选择，应选择行中的每个下拉值。这是我的 plunker link。有人可以帮忙吗？

这里是a link！

var jsonDef = { name: 'Status', field: 'Status', width: 150, 
editType: 'dropdown', 
editableCellTemplate: 'ui-grid/dropdownEditor', 
headerCellTemplate: '<div class="ui-grid-cell-contents header-tcsi"><select 
ng-required = "true" ng-options="options.id as options.type for tcsiOption 
in grid.appScope.MainCtrl" ng-model="grid.appScope.selectedTCSI"></select> 
</div>',
editDropdownIdLabel: 'id', 
editDropdownValueLabel: 'type',
filter: { 
type: uiGridConstants.filter.SELECT, 
condition: uiGridConstants.filter.EXACT } 
};

var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];

Answer 1

您错误地使用了 ng-options。如果你想从 appScope 访问某些东西，你必须将它附加到控制器 $scope。然后，您可以在使用以下选项的地方更改模板：

 headerCellTemplate: '<div class="ui-grid-cell-contents header-Status"><select ng-required = "true" ng-options="options.id as options.type for options in grid.appScope.dropdownoptions" ng-change= "grid.appScope.selectionChanged()"ng-model="grid.appScope.selectedStatus"></select> </div>'

关注ng-options:

ng-options="options.id as options.type for options in grid.appScope.dropdownoptions"

按照您编写代码的方式，您需要在下拉列表发生变化时进行监听，然后更新网格中的值。检查 Updated Plnkr 用于工作示例。

Header ui-grid 中的下拉菜单 AngularJS

Header Dropdown in ui-grid AngularJS

angularjs

ui-grid