angularJsで塗りつぶし

Question

これは私のHTMLとAngularJsコントローラです。私はアプリを起動すると、フォームはng-repeatすることにより、データで満たされている
...

私の質問や問題がある：私はドロップダウンリストをクリックすると
が、私はこの呼び出しを使用してWeb APIを呼び出すと塗りつぶしたいです形。私はWeb APIを呼び出し、Apiからデータを取得しますが、フォームに記入することはできません。

<div class="dropdown" ng-app="myapp" ng-controller="PlayerCtrl"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Insert 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
    <li><a ng-click="Testmetod('2018')" >2018</li> 
    <li><a ng-click="Testmetod('2017')" >2017</li> 
    <li><a ng-click="Testmetod('Previous')" >Previous</li> 
    </ul> 
</div> 

    <div class="lisstatistic"> 
    <section> 
     <div class="tbl-headerStat"> 
     <table cellpadding="0" cellspacing="0" border="1"> 
      <thead> 
      <tr> 
       <th style="width :20%;">Pos</th> 
       <th style="width :60%;">Player</th> 
       <th style="width :20%;">AST</th> 
      </tr> 
      </thead> 
     </table> 
     </div> 
     <div class="tbl-contentStat"> 
     <table cellpadding="0" cellspacing="0" border="0"> 
      <tbody> 
      <tr ng-repeat="dataModel in allAsists"> 
       <td style="width :20%; padding-top: 5px;" >{{dataModel.AstPosition}}</td> 
       <td ng-if = "dataModel.Player.Status == 0" style="width :60%; color:red; padding-top: 5px;" >{{dataModel.Player.FullName}}</td> 
       <td ng-if = "dataModel.Player.Status == 1" style="width :60%; padding-top: 5px;" >{{dataModel.Player.FullName}}</td> 
       <td ng-if = "dataModel.Player.Status == 0" style="width :20%; color:red; padding-top: 5px; text-align:center;" >{{dataModel.Asists | number:0}}</td> 
       <td ng-if = "dataModel.Player.Status == 1" style="width :20%; padding-top: 5px; text-align:center;" >{{dataModel.Asists | number:0}}</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </section> 
</div><div class="lisstatistic"> 
    <section> 
     <div class="tbl-headerStat"> 
     <table cellpadding="0" cellspacing="0" border="1"> 
      <thead> 
      <tr> 
       <th style="width :20%;">Pos</th> 
       <th style="width :60%;">Player</th> 
       <th style="width :20%;">PTS</th> 
      </tr> 
      </thead> 
     </table> 
     </div> 
     <div class="tbl-contentStat"> 
     <table cellpadding="0" cellspacing="0" border="0"> 
      <tbody> 
      <tr ng-repeat="dataModel in allPoints"> 
       <td style="width :20%; padding-top: 5px;" >{{dataModel.PtsPosition}}</td> 
       <td ng-if = "dataModel.Player.Status == 0" style="width :60%; color:red; padding-top: 5px;" >{{dataModel.Player.FullName}}</td> 
       <td ng-if = "dataModel.Player.Status == 1" style="width :60%; padding-top: 5px;" >{{dataModel.Player.FullName}}</td> 
       <td ng-if = "dataModel.Player.Status == 0" style="width :20%; color:red; padding-top: 5px; text-align:center;" >{{dataModel.Points | number:0}}</td> 
       <td ng-if = "dataModel.Player.Status == 1" style="width :20%; padding-top: 5px; text-align:center;" >{{dataModel.Points | number:0}}</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </section> 
</div> 

角度コントローラー：

app.controller('PlayerCtrl', function ($scope, $http, ApiCall) { 

    var result = ApiCall.GetApiCall("nba", "GetRebounds/2000").success(function (data) { 
     //var data = $.parseJSON(JSON.parse(data)); 
     $scope.allRebounds = data; 
    }); 

    $scope.Testmetod = function(year) { 
    var result = ApiCall.GetApiCall("nba", "GetAsists" + '/' + year).success(function (data) { 
     $scope.allAsists = data; 
    }); 
    }; 

}); 

Answer 1

私はあなたの問題はあなたのNG-コントローラは、あなたのプルダウンを取り巻くされていることだと思うので、ページが表示され、すべてのコードは、あなたのコントローラの範囲外であるとdoesnの値にアクセスできません。 アプリとコントローラを含むdivを追加し、HTMLブロック全体を包含させます。

<div ng-app="myapp" ng-controller="PlayerCtrl"> 
    <div class="dropdown"> 
    </div> 
// The rest of your html 
</div>