I have an application in AngularJS (I'm begginer..sorry!) that needs to show diferents tables when I click on the menu.
Problem: simulado1.htm is appearing when I click in the menu, but its table isn't.
What should I do?
It's a SPA using the ng-route and
Thanks everybody!
<!DOCTYPE html>
<html ng-app="app1">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="scripts/route-config.js"></script>
<script src="scripts/table.js"></script>
<link rel="stylesheet" href="styles/style.css">
</head>
<header>
<h2>MEDGRUPO</h2>
</header>
<nav>
<div id="menu-simulados">
<ul> <!-- This is a menu to choose which "simulado" (table) you want to -->
<li><a href="#!simulado1">Simulado 1</a></li>
<li><a href="#!simulado2">Simulado 2</a></li>
<li><a href="#!simulado3">Simulado 3</a></li>
</ul>
</div>
</nav>
<body ng-app="myModule">
<div ng-view></div>
</body>
</html>
// ARCHIVE route-config.js //
var app = angular.module("app1", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm",
controller : "MainCtrl",
})
.when("/simulado1", {
templateUrl : "simulado1.htm",
controller : "Sim1Ctrl",
})
.when("/simulado2", {
templateUrl : "simulado2.htm",
controller : "Sim2Ctrl",
})
.when("/simulado3", {
templateUrl : "simulado3.htm",
controller : "Sim3Ctrl",
});
});
Here it's my archive table.js with the table parameters:
//<reference path="angular.js" />
var app = angular.module("myModule", []).controller("myController", function ($scope) {
var tabela = [
{ posicao: "1", nota: "10", matricula: "897413", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR" , filial:"Salvador (BA)" },
{ posicao: "2", nota: "40", matricula: "897413", especialidade: "cardiologia", turma: "2008 MEDCURSO SP - Turma A/2008 MED SP", filial:"São Paulo (SP)" },
{ posicao: "3", nota: "50", matricula: "205500", especialidade: "cardiologia", turma: "2008 MEDCURSO SP - Turma A/2007 MED SP" , filial:"São Paulo (SP)"},
{ posicao: "4", nota: "90", matricula: "897413", especialidade: "pediatria", turma: "2008 MEDCURSO NATAL - Turma A/2008 MED NATAL", filial:"Natal (RN)" },
{ posicao: "5", nota: "80", matricula: "205500", especialidade: "clinica medica", turma: "2008 MEDCURSO NATAL - Turma A/2005 MED NATAL", filial:"Natal (RN)" },
{ posicao: "6", nota: "70", matricula: "897416", especialidade: "clinica medica", turma: "2008 MEDCURSO NATAL - Turma A/2008 MED NATAL", filial:"Natal (RN)" },
{ posicao: "7", nota: "10", matricula: "205500", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR", filial:"Salvador (BA)" },
{ posicao: "8", nota: "10", matricula: "897413", especialidade: "urologia", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR", filial:"Salvador (BA)" },
{ posicao: "9", nota: "50", matricula: "897415", especialidade: "clinica medica", turma: "2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR", filial:"Salvador (BA)" },
];
$scope.tabela = tabela;
});
// archive simulado1.htm //
<body ng-app="myModule">
<div ng-controller="myController">
Entre com sua Matrícula :
<input type="text" ng-model="searchText.matricula" placeholder="Pesquisar matricula" />
<br><br><br>
<span>
<select ng-model="searchText.especialidade">
<option value="">Especialidades - Todas</option>
<option value="cardiologia">cardiologia</option>
<option value="clinica medica">clinica medica</option>
<option value="pediatria">pediatria</option>
<option value="urologia">urologia</option>
</select>
</span>
<span>
<select ng-model="searchText.turma">
<option value="">Turmas - Todas</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR</option>
<option value="2008 MEDCURSO Natal - Turma A/2008 MED NATAL">2008 MEDCURSO Natal - Turma A/2008 MED NATAL</option>
<option value="2008 MEDCURSO SP - Turma A/2008 MED SP">2008 MEDCURSO SP - Turma A/2008 MED SP</option>
<option value="2008 MEDCURSO SP - Turma A/2007 MED SP">2008 MEDCURSO SP - Turma A/2007 MED SP</option>
<option value="2008 MEDCURSO NATAL - Turma A/2008 MED NATAL">2008 MEDCURSO NATAL - Turma A/2008 MED NATAL</option>
<option value="2008 MEDCURSO NATAL - Turma A/2005 MED NATAL">2008 MEDCURSO NATAL - Turma A/2005 MED NATAL</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2006 MED SALVADOR</option>
<option value="2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR">2008 MEDCURSO SALVADOR - Turma A/2008 MED SALVADOR</option>
</select>
</span>
<span>
<select ng-model="searchText.filial">
<option value="">Filiais - Todas</option>
<option value="Natal">Natal</option>
<option value="Salvador">Salvador</option>
<option value="SP">SP</option>
</select>
</span>
<br><br><br>
<span style="width:100%" onclick="imprimir()" class="imprimir">Imprimir |</span>
<div id="tabelaimpressao">
<table>
<thead>
<tr>
<th>Posição</th>
<th>Nota</th>
<th>Matrícula</th>
<th>Especialidade</th>
<th>Turma</th>
<th>Filial</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="simulado in tabela | filter:searchText">
<td> {{ simulado.posicao }} </td>
<td> {{ simulado.nota }} </td>
<td> {{ simulado.matricula }} </td>
<td> {{ simulado.especialidade }} </td>
<td> {{ simulado.turma }} </td>
<td> {{ simulado.filial }} </td>
</tr>
</tbody>
</table>
two fixes: 1. I removed line 9 from index.html because you were linking 2 times the angular file. 2. Corrected your controller's statement without declaring a new module. As:
app.controller ("myController", function ($ scope) {
There your table loaded by clicking on the link.