ionic数据交互

来源：互联网发布：函数式编程好书编辑：程序博客网时间：2024/06/01 08:23

<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数组中的数据否则会无限累加
                            vardata = 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;
                            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>

阅读全文

0 0