Ionic Infinite scrolling
Задача состоит в том выводить элементы как в примере
http://codepen.io/d4dilip/pen/rkxyA?editors=101 только сдесь выводится динамически создаваемый массив а мне надо что бы выводилось с апи таким же образом(по несколько элементов). У меня получается что выводит сразу всё. http://codepen.io/djan/pen/KwQBed?editors=101 |
Цитата:
<html ng-app="ionicInfiniteScrollApp">
<head lang="en">
<meta charset="UTF-8">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<title>Infinite App Example </title>
<script type='text/javascript'>
/**
* Created by singhdi on 2014-07-26.
*/
var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",['$scope', '$http', '$timeout',function($scope, $http, $timeout){
$scope.moredata = false;
debugger;
$scope.loadMoreData=function(data){
$http.get('http://vse-sto.com.ua/api/v1/cities/')
.success(function(data){
$scope.cities = data;
var key=$timeout(function(){
var i=$scope.items.length;
$scope.items.push({name: data[i].name});
$scope.$broadcast('scroll.infiniteScrollComplete');
if (++i>data.length){
$scope.moredata=true;
$timeout.cancel(key);
};
},100);
})
};
$scope.items=[];
}]);
</script>
</head>
<body ng-controller="InfiniteAppCntrl">
<ion-content>
<ion-header-bar >{{items.length}} items</ion-header-bar>
</ion-content>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items" item="item" href="#{{item}}">
{{$index}} {{item.name}}
</ion-item>
<ion-infinite-scroll distance="2"
on-infinite="loadMoreData()"
ng-if="!moredata"
></ion-infinite-scroll>
</ion-list>
</ion-content>
</body>
</html>
|
Без задержки, но с подгрузкой элементов по прокрутке
<html ng-app="ionicInfiniteScrollApp">
<head lang="en">
<meta charset="UTF-8">
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
<title>Infinite App Example </title>
<script type='text/javascript'>
/**
* Created by singhdi on 2014-07-26.
*/
var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",['$scope', '$http', '$timeout',function($scope, $http, $timeout){
$scope.moredata = false;
debugger;
$scope.loadMoreData=function(data){
$http.get('http://vse-sto.com.ua/api/v1/cities/')
.success(function(data){
$scope.cities = data;
for (var i=0; i<data.length; i++) {
$scope.items.push(data[i]);
$scope.$broadcast('scroll.infiniteScrollComplete');
if (++i>data.length){
$scope.moredata=true;
};
};
})
};
$scope.items=[];
}]);
</script>
</head>
<body ng-controller="InfiniteAppCntrl">
<ion-content>
<ion-header-bar >{{items.length}} items</ion-header-bar>
</ion-content>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items" item="item" href="#{{item}}">
{{$index}} {{item.name}}
</ion-item>
<ion-infinite-scroll distance="2"
on-infinite="loadMoreData()"
ng-if="!moredata"
></ion-infinite-scroll>
</ion-list>
</ion-content>
</body>
</html>
|
Премного благодарен
Если я правильно понимаю в первом способе при выводе элемента каждый раз сервер вытягивает данные(всю базу). Во втором вытягивает два раза по половине. И почему у него нету конца? Есть ли возможность сделать так что бы к серверу каждый раз не обращаться? |
djan, я х/з как работает тот плагин... :D
Просто ты дал какой-то работающий пример и свой... Вот я на основании этой скудной информации предложил тебе такой вот вариант. :) |
| Часовой пояс GMT +3, время: 16:30. |