использовать колонку в angularjs uigrid

Question

Я использую angularjs uigrid с $ scope http для получения данных от контроллера. Теперь здесь я использовал столбцы так:

<div ng-app = "myapp" ng-controller="HelloController"> 
 
     <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
 
    </div> 
 
     
 
<script type="text/javascript"> 
 
var StudentApp = angular.module('myapp', ['ui.grid']); 
 

 
StudentApp.controller('HelloController', function ($scope, StudentService) { 
 
    $scope.columnDefs = [ 
 
{ field: 'FirstName', title: 'fname' }, 
 
{ field: 'Last Name' }, 
 
{ field: 'Salary' }, 
 
{ field: 'DOB' } 
 
], 
 
     getStudents(); 
 
    function getStudents() { 
 
     StudentService.getStudents() 
 
      .success(function (studs) { 
 
       $scope.myData = studs; 
 
       console.log($scope.students); 
 
      }) 
 
      .error(function (error) { 
 
       $scope.status = 'Unable to load customer data: ' + error.message; 
 
       console.log($scope.status); 
 
      }); 
 
    } 
 
}); 
 

 
StudentApp.factory('StudentService', ['$http', function ($http) { 
 
    var StudentService = {}; 
 
    StudentService.getStudents = function() { 
 

 
     return $http.get('/Home/GetEmployee'); 
 
    }; 
 
    return StudentService; 
 

 
} ]); 
 
</script>

в этом я использовал $ scope.columndefs, но он не работает. И как форматировать значение даты здесь? Когда я запускаю это приложение, значение отображается внизу, как показано на рисунке 30 строк.

Answer 1

Попробуйте

<div ng-app = "myapp" ng-controller="HelloController"> 
    <div id="grid1" ui-grid="gridoptions" class="grid"></div> 
</div> 

<script type="text/javascript"> 
var StudentApp = angular.module('myapp', ['ui.grid']); 

StudentApp.controller('HelloController', function ($scope, StudentService) { 
    $scope.columnDefs = [ 
{ field: 'FirstName', title: 'fname' }, 
{ field: 'Last Name' }, 
{ field: 'Salary' }, 
{ field: 'DOB' } 
], 


    $scope.gridoptions = { 
    data:'myData', 
    columnDefs: $scope.columnDefs, 
    } 

      getStudents(); 
     function getStudents() { 
      StudentService.getStudents() 
       .success(function (studs) { 
        $scope.myData = studs; 
        console.log($scope.students); 
       }) 
       .error(function (error) { 
        $scope.status = 'Unable to load customer data: ' + error.message; 
        console.log($scope.status); 
       }); 
     } 
    }); 

    StudentApp.factory('StudentService', ['$http', function ($http) { 
     var StudentService = {}; 
     StudentService.getStudents = function() { 

      return $http.get('/Home/GetEmployee'); 
     }; 
     return StudentService; 

    } ]); 
    </script> 

Я надеюсь, что это будет работать.