angularjs

Question

我在 AngularJS 中有一个应用程序（我是初学者..抱歉！），当我单击菜单时需要显示不同的 table。

问题：当我在菜单中单击时出现 simulado1.htm，但它的 table 没有出现。

我该怎么办？

这是一个使用 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 和 table 参数：

            //<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>

Answer 1

在simulado1.htm中无需再设置ng-app和ng-controller正在路由器配置中设置路由。

 <body ng-app="myModule"> //remove this
 <div ng-controller="myController"> //remove this

Answer 2

两个修复： 1. 我从 index.html 中删除了第 9 行，因为您 linking 了 angular 文件的 2 倍。 2. 在没有声明新模块的情况下更正了控制器的声明。如：

app.controller ("myController", function ($ scope) {

点击 link 即可加载您的 table。

angularjs - table 没有出现

angularjs - table isn't appearing

angularjs-routing