在 console.log 中返回数据 angular 但不显示在 HTML 页面上

Question

我是 angular 的新手，我正在开发 Web 应用程序。我正在 console.log 中获取数据，但无法在 HTML 页面上显示。 table 显示空白值。

这是我的 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>。删除 <th scope="row">

之前的 <tr>

编辑：忽略关于插值符号的第一点，我被告知 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 中返回数据 angular 但不显示在 HTML 页面上

returning data in console.log with angular but not displaying on HTML page

html

angularjs

console.log