renvoyer des données dans console.log avec angulaire mais ne pas afficher sur la page HTML

Question

Je suis nouveau à angulaire et je développe une application Web. J'obtiens des données dans console.log mais je ne peux pas les afficher sur la page HTML. La table affiche une valeur vide.

Voici ma page HTML:

<div class="bs-example" data-example-id="panel-without-body-with-table"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Account list</div> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>#</th> 
        <th>AWS Account</th> 
        <th>VPC</th> 
        <th>Subnet</th> 
        <th>Instance Type</th> 
        <th>Port</th> 
        <th></th> 

       </tr> 
      </thead> 
      <tbody> 
      <!-- {% raw %}--> 
       <tr ng-repeat="Account in Accounts "> 
       <!--{% for account in myaccounts %}track by $index--> 
       <tr> 

        <th scope="row">// $index+1 //</th> 
        <td> // Account.name // </td> 
        <td>// Account.vpc //</td> 
        <td>// Account.subnet //</td> 
        <td>// Account.instance_type //</td> 

        <td><span style="cursor:pointer;" ng-click="editAccount(Account.id)" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></td> 
       </tr> 
       <!--{% endfor %}--> 
       <!-- {% endraw %}--> 
      </tbody> 
     </table> 
    </div> 
</div> 

Voici mon contrôleur angulaire:

angular.module('pushButtonAdmin', []) 

.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('//'); 
    $interpolateProvider.endSymbol('//'); 
    }) 

    .controller('adminCtrl', function($scope, $http) { 

       $scope.info = {}; 

       $scope.showAdd = true; 

       $scope.showAddPopUp = function(){ 
        $scope.showAdd = true; 
        $scope.info = {}; 
        //$('#addPopUp').modal('show'); 
       } 


       $scope.test = function(){ 
        console.log("sfasd"); 
       } 


       $scope.showlist = function(){ 
        $http({ 
         method: 'POST', 
         url: '/getAccountList', 
        }).then(function(response) { 
         $scope.Accounts = response.data; 
         console.log('mm',$scope.Accounts); 
        }, function(error) { 
         console.log(error); 
        }); 
       }    

       $scope.showlist(); 
      }); 

Answer 1

Ces changements sont nécessaires dans votre fichier html:

Le premier problème majeur est que vous n'utilisez pas les symboles d'interpolation html de angular pour accéder à votre itérateur ng-repeat. Vous devez entourer Account.name avec {{ Account.name }} et faire de même pour toutes vos autres propriétés Account.

L'autre problème est que vous avez un <tr> supplémentaire qui ne permet pas à la portée de votre ng-repeat d'atteindre le <td> en dessous. Retirez le <tr> juste avant <th scope="row">

EDIT: Ne tenez pas compte du premier point sur les symboles d'interpolation, on m'a informé que l'OP utilise // pour cela.

Answer 2

<div class="bs-example" data-example-id="panel-without-body-with-table"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Account list</div> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th scope="col">#</th> 
        <th scope="col">AWS Account</th> 
        <th scope="col">VPC</th> 
        <th scope="col">Subnet</th> 
        <th scope="col">Instance Type</th> 
        <th scope="col">Port</th> 
        <th scope="col"></th>  
       </tr> 
      </thead> 
      <tbody> 
      <!-- {% raw %}--> 
       <!--{% for account in myaccounts %}track by $index--> 
       <tr ng-repeat="Account in Accounts track by $index"> 

        <th scope="row">{{$index+1//</th> 
        <td> //Account.name//</td> 
        <td>//Account.vpc//</td> 
        <td>//Account.subnet//</td> 
        <td>//Account.instance_type//</td> 
        <td></td> 
        <td><span style="cursor:pointer;" ng-click="editAccount(Account.id)" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></td> 
       </tr> 
       <!--{% endfor %}--> 
       <!-- {% endraw %}--> 
      </tbody> 
     </table> 
    </div> 
</div>