angularjs-表格未出现

时间:2018-12-31 03:19:35

标签: angularjs angularjs-routing

我在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>

2 个答案:

答案 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

通过单击链接加载表格。