我是web开发的新手，很难将ng表与angularjs一起使用。我的控制器如下：
var diary = angular.module('diary', ['ngTable'])
.controller('mainController',['$scope', '$http', 'NgTableParams',
function($scope,$http, NgTableParams){
$scope.formData = {};
$scope.courses = [];
$scope.data = [];
$scope.getCourses = function(){
$http.get('/api/courses')
.success(function(data) {
$scope.courses = data;
console.log("data in getCourses " + data);
})
.error(function(data) {
console.log('Error: ' + data);
});
}
$scope.tableParams = new NgTableParams({
page: 1,
count: 150
}, {
getData: function ($defer, params) {
console.log('params '+ params)
// when landing on the page, get all todos and show them
$scope.getCourses();
$scope.data = params.sorting() ? $filter('orderBy')($scope.courses, params.orderBy()) : $scope.courses;
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice(0, 20);
$defer.resolve($scope.data);
}
});
}
]
);
观点是这样的：
<!-- index.html -->
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="diary">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Mountain Diary</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#course-list { margin-bottom:30px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script><!-- load angular -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>Mountain Diary - courses: <span class="label label-info">{{ courses.length }}</span></h1>
</div>
<table ng-table="tableParams" class="table-striped" show-filter="true">
<tr ng-repeat="course in data">
<td data-title="'id'" sortable="'id'">{{course.id}}</td>
<td data-title="'date'" sortable="'date'">{{course.date | date}}</td>
<td data-title="'courseType'" sortable="'course.courseType'" filter="{'course.courseType': 'text'}">{{course.courseType | uppercase }} </td>
<td data-title="'place'">{{course.place}}</td>
<td data-title="'partners'">{{course.partners}}</td>
<td data-title="'description'">{{course.description}}</td>
<td data-title="'descriptionDetail'">{{course.descriptionDetail}}</td>
<td data-title="'descriptionUrl'">{{course.descriptionUrl}}</td>
<td data-title="'photoUrl'">{{course.photoUrl}}</td>
</tr>
</table>
</div>
</body>
</html>
当我打开index.html时，我得到错误：无法读取未定义的属性"排序"。
这意味着当调用getData函数时，params为空。
在我看来，当调用getData函数时，$scope.getCourses成功函数尚未终止（异步），因此数据尚未准备好。
但是我该如何解决这个问题呢？非常感谢。
将$scope.getCourses更改为：
$scope.getCourses = function(){
// This function return the `$thhp` promise that resolves with the data returned from the server
return $http.get('/api/courses').then(
function(response) {
// You can also manipulate the data before resolving it here
return response.data;
},
function(data) {
console.log('Error: ' + data);
}
);
}
青少年，在getData: function ($defer, params) {内调用上述函数如下：
$scope.getCourses().then(
function(data) {
var courses = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
courses = params.filter() ? $filter('filter')(courses, params.filter()) : courses;
courses = courses.slice(0, 20);
$defer.resolve(courses);
}
)
FYI:
阅读此弃用通知：
$http遗留承诺方法success和error已被弃用。请改用标准的then方法。如果$httpProvider.useLegacyPromiseExtensions设置为false，则这些方法将引发$http/legacy错误。
这就是为什么我将$scope.getCourses函数中的$http更改为then，而不是使用success和error回调。
自NgTable 1.0.0版本以来，getData的格式发生了变化。你的getData函数应该是这样的：
getData: function (params) {
console.log('params '+ params)
// when landing on the page, get all todos and show them
$scope.getCourses();
$scope.data = params.sorting() ? $filter('orderBy')($scope.courses, params.orderBy()) : $scope.courses;
$scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
$scope.data = $scope.data.slice(0, 20);
return $scope.data;
}