Wykonuję właśnie jeden z tutoriali. Napotkałem na problem, gdzie nie potrafię dodać uib-pagination tak by był widoczny. Badając stronę widzę go z rozmiarem 0x0.
Grid.html wygląda tak:
<div class="container-fluid table-responsive">
<hr />
<table class="table table-striped">
<thead>
<tr>
<th width="20%">SKU</th>
<th width="40%">Title</th>
<th width="10%">On Order</th>
<th width="10%">Due</th>
<th width="10%">Stock Level</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data.lowstockdata.data | limitTo: data.lowstockdata.itemsperpage">
<td>{{x.SKU}}</td>
<td><a style="cursor: pointer" ng-click="openProduct(x)">{{x.ProductTitle}}</a></td>
<td>{{x.OnOrder}}</td>
<td>{{x.Due}}</td>
<td>{{x.StockLevel}}</td>
<td>{{x.Location}}</td>
</tr>
</tbody>
</table>
</div>
<uib-pagination total-items="totalitems" items-per-page="itemsperpage" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
W App.js mam dodante ui.boostrap:
var App = angular.module('App', ['ngRoute', 'ui.bootstrap']);
App.controller('MainController', MainController);
App.controller('GridController', GridController);
var configFunction = function ($routeProvider, $httpProvider) {
$routeProvider.
when('/grid', {
templateUrl: 'SPA/Views/Grid.html',
controller: GridController
})
.otherwise({
redirectTo: function () {
return '/grid';
}
});
}
configFunction.$inject = ['$routeProvider', '$httpProvider'];
App.config(configFunction);
A w głównym index.html dodaję chyba wszystko co jest możliwe. I nadal nie działa..
<script src="~/js/angular.js"></script>
<script src="~/js/angular-route.js"></script>
<script src="~/js/angular-touch.js"></script>
<script src="~/js/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="~/js/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/ui-bootstrap-tpls.js"></script>
<script src="~/js/ui-bootstrap.js"></script>
<script src="~/js/bootstrap.bundle.js"></script>
<link href="~/css/bootstrap.css" rel="stylesheet" />
<link href="~/css/ui-bootstrap-csp.css" rel="stylesheet" />
<link href="~/css/bootstrap-grid.css" rel="stylesheet" />
<link href="~/css/bootstrap-reboot.css" rel="stylesheet" />
<script src="~/SPA/Controller/GridController.js"></script>
<script src="~/SPA/Controller/MainController.js"></script>
<script src="~/SPA/App.js"></script>
Macie jakieś pomysły?