在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页面上不显示

回答

相关问题