Question

我是角色新手，我正在开发一个Web应用程序。我在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控制器：

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

您的html文件中需要进行以下更改：

第一个主要问题是你没有使用angular的html插值符号来访问你的ng-repeat迭代器。您需要将Account.name与{{ Account.name }}包围，并对所有其他Account属性执行相同操作。

另一个问题是，您有一个额外的<tr>，不允许ng-repeat的范围到达其下面的<td>。在<tr>

之前删除<th scope="row">

编辑：忽略关于插值符号的第一点，我被告知OP正在使用//。

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>

在console.log中返回带有角度但未在HTML页面

2 个答案: