Não consigo navegar no meu site, por conta de uma paginação que eu fiz. Peguei um exemplo na Internet e adaptei à minha realidade. Bem, consegui fazer o slice do json gerado,
mas preciso mostrar a botoeira de navegação para avançar ou retroceder às páginas que quero. O que eu achei de estranho, foi a forma que o autor do exemplo incluiu o angular,
o css e
etc.. Ele fez assim: <script
data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
Veja que existe um @* e
um cara data-semver...,
não sei o que é isso. O fato é que se eu faço assim em mina _Layout.cshtml,
dá zica sem "microcefalia". O exemplo no plunker está
nesselink. O original está aqui.
Aqui estão os meus códigos:
_Layout.cshtml
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Content/bootstrap.min.css")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Tipo Contato Operadora", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
<li>@Html.ActionLink("Lista de Tipo Contato Operadora", "Index", "GetTipoContatoOperadora", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/TipoContatoOperadoraController.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-1.3.3.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
Minha Controller
var app = angular.module('app', []);
app.controller('TipoContatoOperadoraController', ['$scope', '$http', TipoContatoOperadoraController])
function TipoContatoOperadoraController($scope, $http) {
$http.get('http://localhost:7216/api/estruturaOrganizacional/tiposContatoOperadora')
.success(function (data) {
$scope.filteredPagina = []
, $scope.currentPage = 1
, $scope.maxSize = 5
, $scope.numPerPage = data.items.length / $scope.maxSize;
$scope.listaTipoContatoOperadora = data.items;
$scope.makePagina = function () {
$scope.app = [];
for (i = 1; i <= data.items.length; i++) {
$scope.app.push({ text: "Página " + i, done: false });
}
};
$scope.makePagina();
$scope.$watch("currentPage + numPerPage", function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredPagina = $scope.listaTipoContatoOperadora.slice(begin, end);
});
})
.error(function () {
//$scope.dt = 'Teste: ' + $scope.data;
$scope.erro = 'Erro: Não foi possível carregar a lista do tipo de contato das operadoras.';
});
}
Minha Index e a table, repeat, paginação e etc
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Tipo Contato Operadora</h2>
<div data-ng-controller="TipoContatoOperadoraController">
<div class="panel panel-default">
<div class="panel-heading">Lista de Tipo de Contato das Operadoras</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<strong>{{erro}}</strong>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover">
<tr>
<th>Cod. Tipo Contato</th>
<th>Nome Tipo Contato</th>
<th>Ind. Tipo Contato</th>
<th>Data Atualização</th>
<th>Cod. Usuário</th>
</tr>
<tr data-ng-repeat="lista in filteredPagina">
<td>{{ lista.id }}</td>
<td>{{ lista.nome }}</td>
<td>{{ lista.tipoContato }}</td>
<td>{{ lista.dataUltimaAtualizacao }}</td>
<td>{{ lista.loginUltimaAtualizacao }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-controller="TipoContatoOperadoraController">
@*<ul>
<li ng-repeat="page in filteredPagina">{{page.text}}</li>
</ul>*@
<pagination ng-model="currentPage" total-items="app.length" max-size="maxSize" boundary-links="true"></pagination>
</div>
