Question

我有一个我第一次尝试的ui-grid项目。我正在尝试添加我的数据和gridOptions。

要使gridOptions正常工作，我需要做

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

要让$ scope.data工作，我需要做

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

如何在ui-grid div中同时获取gridOptions和myData？

这是我的控制器：

        .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}，那么我会看到整个表格，但无法过滤 - 我只想看到两者

Answer 1

在您的控制器中，您可以将数据分配给$ scope.gridOptions.data。

angular ui-grid如何添加过滤器和数据

1 个答案: