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>

我希望这会奏效。

在angularjs uigrid中使用列

1 个答案: