Question

我对这个应用程序有一点问题，我正在构建学习AngularJs。

这是一款足球统计应用。我从2个下拉菜单中选择Home Team和Away团队。然后我必须做一些数学运算并只显示结果。

这是我的HTML代码：

               <div class='dropdown'>
         <span>Seleziona Nazione:      </span>
  <select class='opzioni' ng-model="nazioniSelected">
  <option ng-repeat="nazione in nazioni track by $index" value="{{nazione}}">{{nazione}}
  </option>
  </select>
  </div>

  <div class='dropdown2'>
  <span>Seleziona Campionato:      </span>
  <select class='opzioni' ng-model="campionatoSelected">
  <option ng-repeat="team in teams  | filter: {Paese:nazioniSelected} track by $index" value="{{team.Campionato}}">{{team.Campionato}}
  </option>
  </select>
  </div>


  <div class='SquadraCasa'>
  <span>Seleziona Squadra Casa: </span>
    <select class='opzioni' ng-model="HomeTeamSelected" >
        <option ng-repeat="team in teams  | filter: 
  {Campionato:campionatoSelected, Paese:nazioniSelected} track by $index" 
   value='{{team.Nome}}'>
        {{team.Nome}}
       </option>
    </select>

   </div>


   <div class='SquadraTrasferta'>
   <span>Seleziona Squadra Trasferta:      </span>
    <select class='opzioni' ng-model="AwayTeamSelected">
       <option ng-repeat="team in teams | filter: 
  {Campionato:campionatoSelected, Paese:nazioniSelected} track by $index" 
    value='{{team.Nome}}'>{{team.Nome}}
       </option>
    </select>
    </div>



    <div class='InfoCasa'>
         <ul ng-repeat='team in teams | filter:  {Nome: HomeTeamSelected}  track by $index'>

       <img  ng-show='HomeTeamSelected' src="{{team.Stemma}} ">
     <p class='nome' ng-show='HomeTeamSelected'> {{team.Nome}}  </p>
     </ul>  
     </div>



      <div class='InfoTrasferta'>
      <ul ng-repeat='team in teams | filter:  {Nome: AwayTeamSelected}  track by $index'>

       <img  ng-show='AwayTeamSelected' src="{{team.Stemma}} ">
       <p class='nome2' ng-show='AwayTeamSelected'> {{team.Nome}}   </p>    
       </ul>   
       </div>


      <div class="Calcolo"   ng-show='AwayTeamSelected'>

     <p>
     Doppia Chance             {{doppia}}
     </p><br><br>

     <p>
      1x2
     </p><br><br>

     <p>
     Over 1,5
     </p><br><br>

     <p>
     Over 2,5
     </p>


      <button class="calcola"  ng-click='calcolarisultato(HomeTeamSelected,AwayTeamSelected)' > Calcola

     </div>

我的问题是：在这个ng-click中我不仅要传递名称，还要传递所有团队变量，因为我需要有关我选择的团队的所有数据。

现在我的控制器是这样的，无法正常工作：

              FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
     $http.get('/api/teams').then(function(response) {
         $scope.teams = response.data;
         console.log(response.data);
     });
     var squadra = $scope.teams;
     $scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
         'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
         'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
         'Svizzera', 'Ucraina'
     ];
     $scope.calcolarisultato = function(squadra1, squadra2) {
         for (i = 0; i < squadra.length; i++) {
             for (j = 0; j < squadra.length; i++) {
                 if (squadra[i].Nome == squadra1) {
                     if (squadra[j].Nome == squadra2) {
                         var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
                             squadra[i].Forma) / 3;
                         var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
                             squadra[i].Forma) / 3;
                         if ((media1 + 3) <= media2) {
                             $scope.doppia = '1 X';
                         } else if ((media2 + 3) <= media1) {
                             $scope.doppia = 'X 2';
                         } else {
                             $scope.doppia = 'Niente';
                         }
                     }
                 }
             }
         }
     }
 });

它告诉我，squadra没有定义。

这是我的解决方案，但正如我所说，我想传递所有HomeTeam和AwayTeam数据的功能，而不仅仅是我在此代码中所做的名称。有什么帮助吗？

Answer 1

问题在于异步执行。由于异步执行，squadra的值在API调用之外未定义。

 FootballNumbers.controller('teamController', function($scope, $route, $routeParams, $http) {
         $http.get('/api/teams').then(function(response) {
             $scope.teams = response.data;
             console.log(response.data);
             var squadra = $scope.teams;
         });
     $scope.nazioni = ['Austria', 'Belgio', 'Bulgaria', 'Croazia', 'Danimarca', 'Finlandia',
         'Francia', 'Germania', 'Grecia', 'Inghilterra', 'Italia', 'Norvegia', 'Olanda',
         'Polonia', 'Portogallo', 'Rep. Ceca', 'Romania', 'Russia', 'Spagna', 'Turchia', 'Svezia',
         'Svizzera', 'Ucraina'
     ];
     $scope.calcolarisultato = function(squadra1, squadra2) {
         for (i = 0; i < squadra.length; i++) {
             for (j = 0; j < squadra.length; i++) {
                 if (squadra[i].Nome == squadra1) {
                     if (squadra[j].Nome == squadra2) {
                         var media1 = (squadra[i].Classifica + squadra[i].ClassificaCasa +
                             squadra[i].Forma) / 3;
                         var media2 = (squadra[j].Classifica + squadra[j].ClassificaTrasferta +
                             squadra[i].Forma) / 3;
                         if ((media1 + 3) <= media2) {
                             $scope.doppia = '1 X';
                         } else if ((media2 + 3) <= media1) {
                             $scope.doppia = 'X 2';
                         } else {
                             $scope.doppia = 'Niente';
                         }
                     }
                 }
             }
         }
     }
 });

Answer 2

使用异步函数初始化teams，但在获取这些值之前先启动squadra变量。不要使用控制器内的squadra值，只需使用$scope.teams并删除此行：

var squadra = $scope.teams;

然后，在控制器中使用squadra的任何地方，请使用$scope.teams

进行更改

还要考虑将常量定义为分离的AngularJS常量，而不是在控制器中列出它们，然后在控制器中注入该常量。这使代码更清晰，更可重用。

将数组从数据库传递到控制器AngularJs

2 个答案: