enter image description here我正在尝试使用ng-repeat通过控制器在我的html页面上显示我的json文件中的数据，但它不起作用。我寻找可能出现的每一个错误，但我所有的努力都是徒劳的。 任何帮助，将不胜感激。 提前致谢。 json文件中的数据如下：
[
{
"id":1,
"name":"John",
"company":"Infosys"
},
{
"id":2,
"name":"John2",
"company":"Infosys2"
},
{
"id":3,
"name":"John3",
"company":"Infosys3"
},
{
"id":4,
"name":"John4",
"company":"Infosys4"
},
{
"id":5,
"name":"John5",
"company":"Infosys5"
},
{
"id":6,
"name":"John6",
"company":"Infosys6"
},
{
"id":7,
"name":"John7",
"company":"Infosys7"
},
{
"id":8,
"name":"John8",
"company":"Infosys8"
}
]
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('tabs',{
url:"/tab",
abstract:true,
templateUrl:"templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.addFriend',{
url:"/addFriend",
views:{
'addFriend-tab':{
templateUrl:"templates/addFriend.html",
controller:'addFriendTabController'
}
}
})
.state('tabs.message',{
url:"/message",
views:{
'message-tab':{
templateUrl:"templates/message.html",
controller:'messageTabController'
}
}
})
.state('tabs.notifications',{
url:"/notifications",
views:{
'notifications-tab':{
templateUrl:"templates/notifications.html",
controller:'notificationsTabController'
}
}
})
.state('tabs.profile',{
url:"/profile",
views:{
'profile-tab':{
templateUrl:"templates/profile.html",
controller:'profileTabController'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl',function($scope){
console.log("Home tab");
})
.controller('addFriendTabController',function($scope,personService){
console.log("addFriend tab");
$scope.persons={};
$scope.persons=personService.getData();
$scope.addFriend=function(){
window.alert("Request Sent");
}
})
.controller('messageTabController',function($scope){
console.log("message tab");
})
.controller('notificationsTabController',function($scope){
console.log("notifications tab");
})
.controller('profileTabController',function($scope){
console.log("profile tab");
})
.factory('personService',function($http){
var StudentDataOp = {};
StudentDataOp.getData=function(){
return $http.get("js/data.json").
then(function(response){ console.log(response.data); return response.data;})
};
return StudentDataOp;
})<body ng-app="starter">
<ion-pane>
<div class="bar bar-positive item-input-inset headerBorder">
<label class="item-input-wrapper positive-bg" id="headerSearch">
<i class="icon ion-ios-search placeholder-icon searchIcon"></i>
<input type="search" placeholder="People, jobs, posts and more...">
</label>
<a href="#"><i class="icon ion-grid placeholder-icon searchIcon"></i></a>
</div>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs tabs-swipable class="tabs-icon tabs-positive tabs-top tab-top" on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()">
<ion-tab icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-person-stalker" href="#/tab/addFriend">
<ion-nav-view name="addFriend-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-chatboxes" ui-sref="tabs.message">
<ion-nav-view name="message-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-notifications" ui-sref="tabs.notifications">
<ion-nav-view name="notifications-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-person" ui-sref="tabs.profile">
<ion-nav-view name="profile-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-content class="has-tabs-top">
<div class="list card">
<div class="item item-thumbnail-left">
<img src="img/ionic.png">
<h2 class="listCss">Name</h2>
<h3>Followers</h3>
<p>Time</p>
</div>
<div class="item item-image">
<img src="img/NIKHIL.jpg">
</div>
<a href="#" class="item assertive">Click here...</a>
</div>
</ion-content>
</script>
<script id="templates/addFriend.html" type="text/ng-template">
<ion-content class="has-tabs-top">
<div class="button-bar" style="padding-top: 3%;">
<a class="button button-light connection-button-1 connection-button-2">181 Connections</a>
<a class="button button-light connection-button-1"><p>
<i class="icon ion-plus placeholder-icon addConnection"></i>
Find Conncetions</p></a>
</div>
<div style="background-color: #E6E6E6;overflow: overlay;">
<div style="background-color: white;margin: 15px 0px;padding: 5px;">
No Pending Invitations
<div style="float: right;font-weight: 500;margin-right:10px">MANAGE ALL</div>
</div>
</div>
<div class="card">
<h4 style="color: #387ef5;">People You May Know</h4>
<div ng-hide="hidden" data-ng-repeat="person in persons">
<div class="item item-thumbnail-left">
<img src="img/ionic.png">
<div style="float: left;">
<h2 class="listCss">{{person.name}}</h2>
<h3>{{person.company}}</h3>
<p>{{persons.id}}</p>
</div>
<div style="float: right;padding-top: 20px;padding-right: 20px;">
<i class="icon ion-close-circled addConnection" style="font-size:40px;padding-right: 10px;" ng-click="hidden=!hidden"></i>
<i class="icon ion-person-add addConnection" style="font-size: 40px;" ng-click="addFriend()"></i>
</div>
<hr style="clear: both;top: 26px;position: relative;">
</div>
</div>
</div>
</ion-content>
</script>
<script id="templates/message.html" type="text/ng-template">
</script>
<script id="templates/notifications.html" type="text/ng-template">
</script>
<script id="templates/profile.html" type="text/ng-template">
</script>
</ion-pane>
</body>
答案 0 :(得分：1)
ngRepeat没有错。问题出在您的控制器中。
这一行不正确：
$scope.persons=personService.getData();
服务调用不返回人员数据，它返回一个promise对象。所以，应该这样写：
personsService.getData().then(function(persons) {
$scope.persons = persons;
});