在console.log中使用角度返回數據但在HTML頁面上不顯示

我是angular新手，我正在開發一個Web應用程序。我在console.log中獲取數據，但無法在HTML頁面上顯示它。表顯示空白值。在console.log中使用角度返回數據但在HTML頁面上不顯示

這是我的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>

這裏是我的角度控制器：

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(); 
      });

來源

2017-07-03 user8249571

您應該在這裏爲angularjs添加一個標籤。你會得到更多的幫助。 – SaxyPandaBear

要測試，請嘗試在控制器頂部放置'$ scope.Accounts = [{name：「test」，vpc：「test」，subnet：「test」，instance_type：「test」}]' – Isaac

您確定你應該向'getAccountList'發送一個POST請求？它不應該是'GET'？ – Phil

需要在HTML文件中的這些變化：

的第一個主要問題是，你沒有使用angular的html插值符號來訪問您的迭代器ng-repeat。您需要圍繞Account.name與{{ Account.name }}，併爲所有其他Account屬性執行相同的操作。

另一個問題是，您有一個額外的<tr>，它不允許您的ng-repeat的範圍達到它下面的<td> s。刪除<tr>之前<th scope="row">

編輯：無視關於插值符號的第一點，我被告知OP爲此使用//。

來源

2017-07-04 02:11:00

OP已經將它們的插值開始和結束符號設置爲'//' – Phil

謝謝你的工作，它是導致問題的標記。 – user8249571

-1

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

來源

2017-07-04 05:17:00

在console.log中使用角度返回數據但在HTML頁面上不顯示

回答

相關問題