您的位置:首页 > 其它

ionic数据交互

2017-10-14 21:38 141 查看
<script>

        angular.module('ionicApp', ['ionic'])

                //如果直接从后台获取数据
                .controller("kController", ["$scope",
"$http", "$timeout",
function($scope, $http, $timeout) {

                    $scope.data
= [];

                    $scope.moredata
= true;

                    $scope.getData =
function
() { //在下拉刷新时会自动调用
                        console.log("getData");

                        $scope.moredata
= true;
//激活下拉加载事件
                        getNum
= 0; //充值测试累加变量,这里是方便测试
                        $http.get("data/data1.json").then(function(res)
{

                            console.log("res:",res);

                            $scope.data
= []; //重置data数组中的数据否则会无限累加
                            var
data = res.data.qiye.supports;

                            angular.forEach(data,
function(d) {

                                $scope.data.push(d);

                            });
//                            console.log("getData:",$scope.data);
                        },
function(err) {

                            console.log(err);

                        }).finally(function() {
//不管获取数据成功与否都会执行的代码(一般用于一些成功或失败都要做的动作)
                            //通知下拉完成事件
                            $scope.$broadcast("scroll.refreshComplete");

                        });

                    };

                    $scope.getData();

                    var getNum
= 0;

                    $scope.loadMore =
function
() {

                        console.log('loadMore',
getNum, $scope.moredata);

                        //当$scope.mordata为false不会执行加载更多,可在下拉刷新的时候重新激活为true
                        //可以设置分页,当数据加载完毕,如:初次加载数据只有10条,分页条数为20,设置$scope.moredata为false不会显示加载更多,多页同理
                        //这里设置一个累加变量达到一定值之后不再继续加载
                        if(getNum<10){

                            $scope.moredata=true;

                          
4000
  console.log("第"+getNum+"次");

                        }

                        if (getNum
>= 10) {

                            //10次之后取消上拉加载事件
                            $scope.moredata
= false;

                            console.log('上拉加载事件禁用')

                            return;

                        }

                        $http.get('data/data1.json').success(function(data)
{

                            $scope.data
= $scope.data.concat(data.qiye.supports);

                            console.log(data);

                            /*var timer = */$timeout(function() {

                                // 停止广播上拉加载请求
                                $scope.$broadcast('scroll.infiniteScrollComplete');

                            },2000);

                            getNum++;

                        });

                    };

                    $scope.$on('stateChangeSuccess',
function() {

                        $scope.loadMore();

                    });

                }])

    </script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息