在angularjs中使用列uigrid

Question

我使用帶$ scope http的angularjs uigrid從控制器獲取數據。 現在在這裏，我使用的列是這樣的：

<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> 

我希望這會工作。