角UI电网：如何创建列筛选一个pre-填充下拉菜单 [英] Angular UI Grid: How to create a pre-populated dropdown menu for column filtering
问题描述
我要寻找一些帮助关于 角UI电网 的一个特点。具体来说，我正在探索的 过滤 ，虽然我是能够成功地实现使用排序在我的应用程序自由格式文本字段（S），因为它们在 例如做自己的网站 我想一些帮助找到一种方法，而不是那种使用pre-填充下拉菜单中的某些列即可。
澄清：按pre-填充我的意思是，我想通过我的code填充下拉。我确定，如果解决方案包含硬件codeD的数据，但我的最终目标将是拥有pre-人群中包括了的唯一的进行排序设置列的数据值： ）
我已经看到了这个功能（例如）剑道UI（kendodropdownlist），但我不感兴趣与解决方案走来的价格标签。我想坚持提到的（和链接）上面的角度UI格。在计算器上我发现了一个 <一个href=\"http://stackoverflow.com/questions/27169714/how-do-i-use-a-dropdown-box-as-a-column-header-filter-in-ng-grid-ui-grid\">similar问题 但遗憾的是它似乎没有已经得到太多的吸引力。我希望通过给的什么，我期待一个更详细的解释，因为我将获得更完整的答案比我在那里发现。
下面是什么是目前在我的控制器：
VAR simpleMessagingApp = angular.module（'MainAppCtrl'，['ngAnimate'，
'ngTouch'，'ui.grid']）;simpleMessagingApp.controller（'CacheTableCtrl'，['$范围，$ HTTP，
uiGridConstants'，函数（$范围，$ HTTP，uiGridConstants）{
$ scope.columns = [{
现场：trans_detail'，
显示名：交易
}，{
现场：CUST_NAME'，
显示名：客户
}，{
现场：量，
显示名：量，
过滤器：[{
条件：uiGridConstants.filter.GREATER_THAN，
占位符：'大于'
}，{
条件：uiGridConstants.filter.LESS_THAN，
占位符：'小于'
}
]
}，{
现场：today_date'，
显示名：当前日期
}];
$ scope.gridOptions1 = {
enableSorting：真实，
enableFiltering：真实，
columnDefs：$ scope.columns，
onRegisterApi：功能（gridApi）{
$ scope.grid1Api = gridApi;
}
}; $ http.get（../服务/连贯性/高速缓存）。成功（功能（数据）{
$ scope.gridOptions1.data =数据;
}）;}]）;
下面是输出 - 与自由格式文本字段
有关这个具体的例子列客户，数量及当前日期，我可能会离开的自由形式的下拉菜单，但我真的希望能够使用pre-填充下拉的交易进行过滤（和有它在我的工具箱，当然未来的项目！）。
谢谢！
您可以使用内置在这里的文档selectOptions过滤功能：的 http://ui-grid.info/docs/#/tutorial/103_filtering
例如：
angular.module（'ExampleApp中'，['ui.grid']）\r
.controller（'exampleCtrl'，['$范围，uiGridConstants'，函数（$范围，uiGridConstants）{\r
VAR动物= [\r
{ID：1，键入：哺乳动物，名称：大象}，\r
{ID：2，类型：'爬行'，名称：'海龟'}，\r
{ID：3，键入：哺乳动物，名称：'人类'}\r
];\r
\r
VAR animalTypes = [\r
{值：哺乳动物，标签：哺乳动物}，\r
{值：'爬行'，标签：'爬行'}\r
];\r
\r
$ scope.animalGrid = {\r
enableFiltering：真实，\r
columnDefs：\r
{\r
名称：'类型'，\r
现场：类型，\r
过滤器：{selectOptions：animalTypes，类型：uiGridConstants.filter.SELECT}\r
}，\r
{名称：'名'，名称：'名'}\r
]\r
数据：动物\r
};\r
\r
}]）; \r
＆LT;链接HREF =http://ui-grid.info/release /ui-grid.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =http://ui-grid.info/release/ui-grid.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; DIV NG-应用=ExampleApp中＆GT;\r
＆LT; DIV NG控制器=exampleCtrl＆GT;\r
＆LT; H1＆GT; UI电网下拉过滤器示例＆LT; / H1＆GT;\r
＆LT;格UI格=animalGrid级=网格＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
I am looking for some help regarding a feature of the Angular UI Grid. Specifically I am exploring filtering and while I was able to successfully implement sorting using free form text field(s) in my application as they do in the example on their site I would like some help finding a way to instead sort using a pre-populated drop-down menu for certain columns.
To clarify: By pre-populated I mean I would like the drop-down to be populated through my code. I am ok if the solution contains hard-coded data but my eventual goal would be to have the pre-population be comprised of the unique data value set of the column being sorted :)
I have seen this functionality in (for example) the Kendo UI (kendodropdownlist) but I am not interested in the price tag that comes along with that solution. I would like to stick with the Angular UI-grid mentioned (and linked) above. On StackOverflow I found one similar question but unfortunately it didn't seem to have gotten much traction. I am hoping that by giving a more detailed explanation of what I am looking for I will receive a more complete answer than I found there.
Here is what is currently in my controller:
var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate',
'ngTouch', 'ui.grid' ]);
simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http',
'uiGridConstants', function($scope, $http, uiGridConstants) {
$scope.columns = [ {
field : 'trans_detail',
displayName : 'Transaction'
}, {
field : 'cust_name',
displayName : 'Customer'
}, {
field : 'quantity',
displayName : 'Quantity',
filters : [ {
condition : uiGridConstants.filter.GREATER_THAN,
placeholder : 'greater than'
}, {
condition : uiGridConstants.filter.LESS_THAN,
placeholder : 'less than'
}
]
}, {
field : 'today_date',
displayName : 'Current Date'
} ];
$scope.gridOptions1 = {
enableSorting : true,
enableFiltering : true,
columnDefs : $scope.columns,
onRegisterApi : function(gridApi) {
$scope.grid1Api = gridApi;
}
};
$http.get("../services/Coherence/Cache").success(function(data) {
$scope.gridOptions1.data = data;
});
} ]);
Below is the output - with the free-form text fields
For this specific example columns Customer, Quantity, and Current Date I would probably leave as free form drop downs, but I would really like to be able to filter using a pre-populated drop down for the transactions (and to have it in my toolbox for future projects of course!).
Thanks!
You can use the built in selectOptions filter feature documented here: http://ui-grid.info/docs/#/tutorial/103_filtering
Example:
angular.module('exampleApp', ['ui.grid'])
.controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
var animals = [
{ id: 1, type: 'Mammal', name: 'Elephant' },
{ id: 2, type: 'Reptile', name: 'Turtle' },
{ id: 3, type: 'Mammal', name: 'Human' }
];
var animalTypes = [
{ value: 'Mammal', label: 'Mammal' },
{ value: 'Reptile', label: 'Reptile'}
];
$scope.animalGrid = {
enableFiltering: true,
columnDefs: [
{
name: 'type',
field: 'type',
filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
},
{ name: 'name', name: 'name'}
],
data: animals
};
}]);
<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<div ng-app="exampleApp">
<div ng-controller="exampleCtrl">
<h1>UI Grid Dropdown Filter Example</h1>
<div ui-grid="animalGrid" class="grid"></div>
</div>
</div>
这篇关于角UI电网：如何创建列筛选一个pre-填充下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
