ng-table> TypeError: Cannot read property 'sorting' of undefined
ng-table> TypeError: Cannot read property 'sorting' of undefined
尝试使用 ng-tables 打开页面时,我总是收到错误“TypeError: Cannot read 属性 'sorting' of undefined”。我有一个控制器
movies.js
app.controller('moviesController', ['$scope', '$http', '$uibModal', 'blockUI', 'notifyService', 'lib', '$filter', 'NgTableParams', function ($scope, $http, $uibModal, blockUI, notifyService, lib, $filter, NgTableParams) {
var createTable = function (options, dataFunction) {
return new NgTableParams(options, {
total: dataFunction().length,
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(dataFunction(), params.orderBy()) : dataFunction();
orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
};
var movies = [];
$scope.moviesTable = createTable({
page: 1, count: 10, sorting: {
title: 'asc'
}
}, function () {
return movies;
});
var init = function () {
loadMovies();
};
var loadMovies = function () {
blockUI.start();
$http.get('/Api/Movies').then(
function (response) {
blockUI.stop();
movies = response.data;
$scope.moviesTable.reload();
}, lib.handleError);
};
init();
}]);
它的 html 看起来像这样:
Index.cshtml
@using System.Web.Optimization
@{
ViewBag.Title = "Movies";
}
@section libs {
@Scripts.Render("~/bundles/movies")
}
<html>
<head>
</head>
<body>
<div ng-controller="moviesController" block-ui="moviesContentDiv">
<h2>Movies</h2>
<div ng-show="movies.length < 1">
<p>There are no registered Movies yet.</p>
</div>
<div ng-hide="moviesTable.data.length < 1">
<table ng-table="moviesTable" class="table" show-filter="true">
<tr ng-repeat="movie in $data">
<td title="'Title'" filter="{ title: 'text'}" sortable="'title'">
<a ng-href="/Movie/Details/{{movie.id}}"> {{movie.title }}</a>
</td>
<td title="'Rank'" filter="{ rank: 'number'}" sortable="'rank'">
{{movie.rank}}
</td>
<td title="'Year'" filter="{ year: 'number'}" sortable="'year'">
{{movie.year}}
</td>
<td title="'Genre'" sortable="'genre'">
{{movie.genre}}
</td>
</tr>
</table>
</div>
<div class="top-space-lg">
<a href="/Movie/Create" class="btn btn-default"><i class="fa fa-plus"></i> Add movie</a>
</div>
</div>
</body>
</html>
html 有一个共享布局,它的部分代码有
_Layout.cshtml
@Scripts.Render("~/bundles/lib")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/uiBootstrap")
在另一个文件中,我包含了这样的包:
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/angular-block-ui.css", "~/Content/pnotify.css"
, "~/Content/ng-table.css", "~/Content/Site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js", "~/Scripts/angular-route.js",
"~/Scripts/angular-block-ui.js", "~/Scripts/pnotify.js", "~/Scripts/directives.js","~/Scripts/ng-table.js"));
我对 AngularJS、HTML 和 C# 还是很陌生。什么可能是错误的并导致该错误?我找不到任何可以解决我的问题的方法
我发现了。我已经用 NuGet 安装了 ngTable 3.0.1。在我卸载它并再次安装但版本为 0.8.3 后,错误停止并且应用程序开始正常运行。
尝试使用 ng-tables 打开页面时,我总是收到错误“TypeError: Cannot read 属性 'sorting' of undefined”。我有一个控制器
movies.js
app.controller('moviesController', ['$scope', '$http', '$uibModal', 'blockUI', 'notifyService', 'lib', '$filter', 'NgTableParams', function ($scope, $http, $uibModal, blockUI, notifyService, lib, $filter, NgTableParams) {
var createTable = function (options, dataFunction) {
return new NgTableParams(options, {
total: dataFunction().length,
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(dataFunction(), params.orderBy()) : dataFunction();
orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
};
var movies = [];
$scope.moviesTable = createTable({
page: 1, count: 10, sorting: {
title: 'asc'
}
}, function () {
return movies;
});
var init = function () {
loadMovies();
};
var loadMovies = function () {
blockUI.start();
$http.get('/Api/Movies').then(
function (response) {
blockUI.stop();
movies = response.data;
$scope.moviesTable.reload();
}, lib.handleError);
};
init();
}]);
它的 html 看起来像这样:
Index.cshtml
@using System.Web.Optimization
@{
ViewBag.Title = "Movies";
}
@section libs {
@Scripts.Render("~/bundles/movies")
}
<html>
<head>
</head>
<body>
<div ng-controller="moviesController" block-ui="moviesContentDiv">
<h2>Movies</h2>
<div ng-show="movies.length < 1">
<p>There are no registered Movies yet.</p>
</div>
<div ng-hide="moviesTable.data.length < 1">
<table ng-table="moviesTable" class="table" show-filter="true">
<tr ng-repeat="movie in $data">
<td title="'Title'" filter="{ title: 'text'}" sortable="'title'">
<a ng-href="/Movie/Details/{{movie.id}}"> {{movie.title }}</a>
</td>
<td title="'Rank'" filter="{ rank: 'number'}" sortable="'rank'">
{{movie.rank}}
</td>
<td title="'Year'" filter="{ year: 'number'}" sortable="'year'">
{{movie.year}}
</td>
<td title="'Genre'" sortable="'genre'">
{{movie.genre}}
</td>
</tr>
</table>
</div>
<div class="top-space-lg">
<a href="/Movie/Create" class="btn btn-default"><i class="fa fa-plus"></i> Add movie</a>
</div>
</div>
</body>
</html>
html 有一个共享布局,它的部分代码有
_Layout.cshtml
@Scripts.Render("~/bundles/lib")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/uiBootstrap")
在另一个文件中,我包含了这样的包:
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css", "~/Content/angular-block-ui.css", "~/Content/pnotify.css"
, "~/Content/ng-table.css", "~/Content/Site.css"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js", "~/Scripts/angular-route.js",
"~/Scripts/angular-block-ui.js", "~/Scripts/pnotify.js", "~/Scripts/directives.js","~/Scripts/ng-table.js"));
我对 AngularJS、HTML 和 C# 还是很陌生。什么可能是错误的并导致该错误?我找不到任何可以解决我的问题的方法
我发现了。我已经用 NuGet 安装了 ngTable 3.0.1。在我卸载它并再次安装但版本为 0.8.3 后,错误停止并且应用程序开始正常运行。