angular ui-grid how to add filters and data

Question

I have a ui-grid project I am trying for the first time. I am trying to add BOTH my data and my gridOptions.

To get the gridOptions to work I need to do

<div id="grid1" ui-grid="gridOptions" class="grid"></div>

To get the $scope.data to work I need to do

<div id="grid1" ui-grid="{data: myData}" class="grid"></div>

How do I get both the gridOptions and myData in the ui-grid div?

Here is my controller:

        .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];
     }
   };
 })

}());

to reiterate. if I just use ui-grid="gridOptions, i only see the header row of the grid with the filter options. If I just use ui-grid={data:myData} then I see the entire table, but without the ability to filter - I just want to see both

Answer 1

In your controller, you can assign your data to $scope.gridOptions.data.