Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2015, 00:09
Интересующийся
Отправить личное сообщение для djan Посмотреть профиль Найти все сообщения от djan
 
Регистрация: 13.09.2014
Сообщений: 12

Ionic Infinite scrolling
Задача состоит в том выводить элементы как в примере
http://codepen.io/d4dilip/pen/rkxyA?editors=101
только сдесь выводится динамически создаваемый массив
а мне надо что бы выводилось с апи таким же образом(по несколько элементов).
У меня получается что выводит сразу всё.
http://codepen.io/djan/pen/KwQBed?editors=101
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2015, 10:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от djan
Задача состоит в том выводить элементы как в примере
Как вариант...

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2015, 10:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Без задержки, но с подгрузкой элементов по прокрутке

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2015, 12:33
Интересующийся
Отправить личное сообщение для djan Посмотреть профиль Найти все сообщения от djan
 
Регистрация: 13.09.2014
Сообщений: 12

Премного благодарен
Если я правильно понимаю в первом способе при выводе элемента каждый раз сервер вытягивает данные(всю базу).
Во втором вытягивает два раза по половине.
И почему у него нету конца?
Есть ли возможность сделать так что бы к серверу каждый раз не обращаться?

Последний раз редактировалось djan, 16.02.2015 в 12:39.
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2015, 14:26
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

djan, я х/з как работает тот плагин...
Просто ты дал какой-то работающий пример и свой... Вот я на основании этой скудной информации предложил тебе такой вот вариант.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как организовать infinite scroll на AngularJs? ProbablyNot Angular.js 0 10.11.2014 11:09
grid scrolling treasury ExtJS 6 10.09.2014 13:54
tiny scrolling работает только на первой закладке jquery tabs beznika jQuery 4 14.01.2013 09:01
При наведении изменить scrolling в iframe zerg Элементы интерфейса 1 28.11.2009 19:56