從數據庫傳遞數組到控制器AngularJs

Question

我有一個小的問題，這個應用程序，我正在建設學習AngularJs。

這是一個足球統計的應用程序。我從2個下拉菜單中選擇主隊和客隊。 然後，我必須做一些數學運算，並只顯示結果。

這是我的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單擊我想通過不僅名字，但所有的球隊變量，因爲我需要所有關於球隊數據我選擇了。

現在我的控制器是這樣的，而不是工作：

   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

您初始化的teams與異步功能，但你初始化的變量squadra之前得到這些值。而不是使用您的控制器內的squadra值，只需使用$scope.teams，並刪除此行：

var squadra = $scope.teams; 

那麼無論在你的控制器使用squadra，與$scope.teams

而且改變它想定義常量分離AngularJS常量，而不是將它們列在控制器中，然後在控制器中注入該常量。這可以讓代碼更清潔，更可重用。

Answer 2

問題是由於異步執行。由於異步執行，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'; 
         } 
        } 
       } 
      } 
     } 
    } 
});