我在AngularJS中有一个应用程序(我是begginer..sorry!),当我单击菜单时需要显示不同表。
问题:当我单击菜单时出现simulado1.htm,但没有显示该表。
我该怎么办?
这是使用ng-route和
的SPA谢谢大家!
<!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",
});
});
这是我的带有表格参数的存档table.js:
//<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;
});
//存档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>
答案 0 :(得分:0)
在simulado1.htm中,无需在路由器配置中设置路由时再次设置 ng-app
和 ng-controller
。< / p>
<body ng-app="myModule"> //remove this
<div ng-controller="myController"> //remove this
答案 1 :(得分:0)
两个修复程序: 1.我从index.html中删除了第9行,因为您链接的是角度文件的2倍。 2.更正了控制器的声明,但未声明新模块。为:
anchor
通过单击链接加载表格。