0
私は初めて試みているui-gridプロジェクトを持っています。私は私のデータと私のgridOptionsの両方を追加しようとしています。私はgridOptionsとMYDATAの両方を取得するにはどうすればよいangular ui-gridフィルタとデータを追加する方法
<div id="grid1" ui-grid="{data: myData}" class="grid"></div>
を行う必要がありgridOptionsを動作させるために
私は$のscope.data作業を取得するには
<div id="grid1" ui-grid="gridOptions" class="grid"></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}を使用している場合、私は全体の表を参照してください、しかし、フィルタリングする機能なし - 私はちょうどあなたのコントローラで両方
