Angular Data binding not showing data..

Question

I am new to Angular and trying to show data using controller but its not showing.. I think i have made some silly mistake and data is not coming without error.

Here is JS:

(function () {
    'use strict';

    var app = angular.module('empapp', []).controller('emplcontroller', ['$scope', function ($scope) {
        $scope.empdatateamdynamo = [
         {
             name: 'name will be here',
             profilepic: 'image will be here',
             designation: 'designation will be here',
             teamname: 'team will be here'
         },

        {
             name: 'name will be here',
             profilepic: 'image will be here',
             designation: 'designation will be here',
             teamname: 'team will be here'
        },

        {
             name: 'name will be here',
             profilepic: 'image will be here',
             designation: 'designation will be here',
             teamname: 'team will be here'
        }
        ]

    }]);

})();

HTML is here:

<body ng-app="empapp">
    <div class="container" ng-controller="emplcontroller">
        <!-- Example row of columns -->
        <div class="row">
            <div class="col-md-4" ng-repeat="items in empdatateamdynamo">
                <h2> {{ empdatateamdynamo.name }}</h2>
                <p> {{ empdatateamdynamo.profilepic }} </p>
                <p> {{ empdatateamdynamo.designation }} </p>
                <p><a class="btn btn-default" href="#" role="button"> {{ empdatateamdynamo.teamname}}</a></p>
            </div>
        </div>
     </div> 
</body>

Pankaj Parkar · Accepted Answer · 2016-02-21 16:54:00Z

3

You should get data from current instance of ng-repeat here it is items is current instance of ng-repeat.

Markup

<div class="col-md-4" ng-repeat="items in empdatateamdynamo">
    <h2>{{items.name}}</h2>
    <p>{{items.profilepic}} </p>
    <p>{{items.designation}} </p>
    <p>
       <a class="btn btn-default" href="#" role="button"> 
          {{items.teamname}}
       </a>
    </p>
</div>

When you wanted to load data from server, you need to use $http.get call to retrieve data from service

Code

var app = angular.module('empapp', [])
.controller('emplcontroller', ['$scope', '$http', function($scope, $http) {
   $http.get('data.json').then(function(response){
      $scope.empdatateamdynamo = response.data;
   });
}]);

Demo Here

edited Feb 21, 2016 at 16:54

answered Feb 21, 2016 at 16:26

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pankaj Parkar Over a year ago

@kuldeepsingh23 Glad to know that. Thanks :)

kuldeep Over a year ago

Can you please help me if i would like to call this data from external Json?

kuldeep Over a year ago

Seems like working but json is not loading due to some other problem..i will fix this. Thanks again..

Pankaj Parkar Over a year ago

@kuldeepsingh23 you could accept answer now. Thanks & cheers :)

Collectives™ on Stack Overflow

Angular Data binding not showing data..

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related