CODEWITHSUNDEEP
htmlangularjsconsole.log
user8249571
user8249571

Reputation: 3

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

I am new to angular and I am developing a Web application. I am getting data in console.log but not able to display it on HTML page. table is displaying blank value.

Here is my HTML page:

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

Here is my Angular controller:

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

Upvotes: 0

Views: 2417

Answers (2)

Daniel W.
Daniel W.

Reputation: 563

These changes are needed in your html file:

The first major problem is that you are not using angular's html interpolation symbols to access your ng-repeat iterator. You need to surround Account.name with {{ Account.name }} and do the same for all of your other Account properties.

The other problem is that you have an extra <tr> that is not allowing the scope of your ng-repeat to reach the <td>s below it. Remove the <tr> right before <th scope="row">

EDIT: Disregard the first point about interpolation symbols, I was informed that the OP is using // for this.

Upvotes: 2

alfishan aqeel
alfishan aqeel

Reputation: 220

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

Upvotes: -1

Related Questions