0
我有我第一次尝试的ui网格项目。我试图添加我的数据和我的gridOptions。角度ui网格如何添加过滤器和数据
为了让gridOptions工作，我需要做的
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
为了让$ scope.data工作，我需要做的
<div id="grid1" ui-grid="{data: myData}" class="grid"></div>
我如何获得这两个gridOptions和myData的在ui网格div？
这里是我的控制器：
.controller('ListCtrl', function ($scope, $state, ServerRequest, $localStorage, $sessionStorage, uiGridConstants) {
var vm = this, c = console;
$scope.myData = [
{
"alert": "10",
"firstName": "Jon",
"lastName": "Smith",
"DOB": "09/30/1987",
"sex": "M",
"MI": "A",
"referralReason": "Eye Exam",
"status": "Rescheduled",
"time": "9:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "awesome"
},
{
"alert": "9",
"firstName": "Jane",
"lastName": "Doe",
"DOB": "02/22/1927",
"sex": "F",
"MI": "A",
"referralReason": "Diabetic Seizure",
"status": "Rescheduled",
"time": "10:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "cool"
},
{
"alert": "6",
"firstName": "James",
"lastName": "Brooke",
"DOB": "02/30/1888",
"sex": "M",
"MI": "F",
"referralReason": "Corneal Crestocopy",
"status": "Rescheduled",
"time": "11:00AM",
"homeNum": "416-555-5555",
"cellNum": "905-555-5555",
"notes": "awesome"
}
];
//this formats the row
$scope.highlightFilteredHeader = function(row, rowRenderIndex, col, colRenderIndex) {
if(col.filters[0].term){
return 'header-filtered';
} else {
return '';
}
};
//this code handles the sort functions of each column
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{
field: 'alert', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'firstName', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'lastName', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'DOB', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'referralReason', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'status', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'time', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'homeNum', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'cellNum', headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'MI', headerCellClass: $scope.highlightFilteredHeader
},
{ field: 'sex', filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
},
cellFilter: 'mapGender', headerCellClass: $scope.highlightFilteredHeader },
{
field: 'notes', headerCellClass: $scope.highlightFilteredHeader
},
]
};
})//end of controller
//this is for the gender filter as it has inline options
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
}());
重申。如果我只是使用ui-grid="gridOptions，我只能看到具有过滤器选项的网格标题行。如果我只是用ui-grid={data:myData}然后我看到整个表，但没有过滤的能力 - 我只是想看看这两个
