2017-01-25 42 views
0

enter image description here不工作我试图用NG-重复通过控制器来显示我的html页面上从我的JSON文件中的数据,但它不工作。我寻找我可能犯下的每一个可能的错误,但所有的努力都是徒劳的。 任何帮助,将不胜感激。 在此先感谢。 在JSON文件中的数据如下:NG-重演离子

[ 
      { 
       "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

你的console.log打印什么? – JoeriShoeby

+0

我认为数据是'StudentDataOp.getData',而不是在'StudentDataOp' –

+0

如果检查工厂我做了,我已经写了的console.log语句,并从我的JSON文件 – Nikhil

回答

1

没有什么错ngRepeat。问题出在你的控制器上。 这条线是不正确的:

$scope.persons=personService.getData(); 

服务调用不返回的人的数据,它会返回一个承诺对象。所以,应该这样写:

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

感谢快照,我忘了工厂 – Nikhil

+0

的承诺概念的承诺概念无关设有工厂,仅供参考。它只是'$ http()。then()'的返回类型。 '$ http'本身也返回一个promise对象。 –