在Ionic V1中使用ng-repeat在屏幕上看不到列表的最后一项

时间:2017-01-26 07:31:46

标签: angularjs ionic-framework



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

      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={};
    personService.getData().then(function(response) { 
        $scope.persons = response.data;    
    });
      
    $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){
        return{
        getData:function(){
          return $http.get("js/data.json");                 
        }
      }
        
  })




我使用data-ng-repeat来迭代我的数据数组。该指令工作正常,但如果我向下滑动,即使它在DOM中存在,也不会在屏幕上完全显示数组的最后一项。

我附上快照供参考。

Click here for screenshot



 <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>{{person.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>
&#13;
&#13;
&#13;

0 个答案:

没有答案