CODEWITHSUNDEEP
angularjsdata-bindingangularjs-ng-repeat
kuldeep
kuldeep

Reputation: 98

Angular Data binding not showing data..

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>

Upvotes: 3

Views: 3807

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

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

Upvotes: 3

Related Questions