Angular 数据绑定未显示数据..

Question

我是 Angular 的新手，正在尝试使用控制器显示数据，但它没有显示。我想我犯了一些愚蠢的错误，数据并非没有错误。

这是 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 在这里：

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

Answer 1

您应该从 ng-repeat 的当前实例获取数据，这里是 items 是 ng-repeat 的当前实例。

标记

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

当您想从服务器加载数据时，您需要使用 $http.get 调用从服务中检索数据

代码

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

Angular 数据绑定未显示数据..

Angular Data binding not showing data..

data-binding

angularjs

ng-repeat

angularjs-ng-repeat