0
Je reçois toujours l'erreur "TypeError: Impossible de lire la propriété 'tri' de non défini" lorsque vous essayez d'utiliser ng-tables pour ouvrir une page. J'ai un contrôleurng-table> TypeError: Impossible de lire la propriété 'trier' de non défini
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();
}]);
et son html ressemble que:
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>
Le html a une mise en page partagée une partie de son code a le
_Layout.cshtml
@Scripts.Render("~/bundles/lib")
@Scripts.Render("~/bundles/angular")
@Scripts.Render("~/bundles/uiBootstrap")
sur un autre fichier, je les faisceaux inclus comme:
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"));
Je suis encore très nouveau pour AngularJS, HTML et C#. Qu'est-ce qui peut éventuellement être mauvais et causer cette erreur? Je n'ai trouvé rien qui pourrait résoudre mon problème
Je suppose que l'erreur vient d'ici: var orderedData = params.sorting() - la question est, est «trier» une méthode sur params, ou une propriété? Ne voyez pas non plus une application ng dans le modèle, mais je présume qu'elle est là? – rrd
@rrd ng-app est dans la disposition partagée. Pour ce qui est du tri, je n'ai pas beaucoup suivi un tutoriel à ce sujet et j'ai simplement copié et collé cette partie. mais ici j'ai un lien http://ng-table.com/#/sorting/demo-sorting-basic et un autre http://tutlane.com/tutorial/angularjs/angularjs-table-sorting-with-ng-table –