ng-repeat在Ionic中不起作用

Question

enter image description here I'm trying to display the data from my json file on my html page through controller using ng-repeat but it's not working. 在此处输入图片描述，我正在尝试使用ng-repeat通过控制器在html页面上显示json文件中的数据，但无法正常工作。 I looked for every possible errors I might have made but all my efforts went in vain. 我寻找可能会犯的所有错误，但是我所有的努力都徒劳无功。 Any help would be appreciated. 任何帮助，将不胜感激。 Thanks in advance. 提前致谢。 The data in json file is as follows: 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>

Answer 1

There is nothing wrong with ngRepeat . ngRepeat没有错。 The problem is in your controller. 问题出在您的控制器中。 This line is not correct: 这行是不正确的：

$scope.persons=personService.getData();

The service call does not return persons data, it returns a promise object. 服务调用不返回人员数据，而是返回一个promise对象。 So, it should be written like this: 因此，应该这样写：

personsService.getData().then(function(persons) {
  $scope.persons = persons;
});

ng-repeat在Ionic中不起作用

问题描述

1 个解决方案

解决方案1
1 2017-01-25 18:46:24

ng-repeat在Ionic中不起作用

问题描述

1 个解决方案

解决方案1 1 2017-01-25 18:46:24

解决方案1
1 2017-01-25 18:46:24