在带有角度但不显示在 HTML 页面上的 console.log 中返回数据答案

【问题标题】：returning data in console.log with angular but not displaying on HTML page在带有角度但不显示在 HTML 页面上的 console.log 中返回数据
【发布时间】：2017-07-05 05:13:15
【问题描述】：

我是 Angular 的新手，我正在开发一个 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();
            });

【问题讨论】：

你可能也应该在这里为 angularjs 添加一个标签。这样你会得到更多帮助。
要测试，请尝试将$scope.Accounts = [{name: "test", vpc: "test", subnet: "test", instance_type: "test"}] 放在控制器顶部
您确定应该向getAccountList 发送POST 请求吗？不应该是GET？
你的表结构不对。删除额外的<tr>，您还缺少用于 Port 的<td>
@Phil 这是一个标签问题，我一直在寻找，但不是在那里。谢谢。

标签： html angularjs console.log

【解决方案1】：

在您的 html 文件中需要进行这些更改：

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

另一个问题是你有一个额外的<tr>，它不允许你的ng-repeat 的范围到达它下面的<td>s。删除<th scope="row">之前的<tr>

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

【讨论】：

OP 已将其插值开始和结束符号设置为//
谢谢它的工作它是标签导致问题。

【解决方案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>

【讨论】：