angular.js第一个项目 简单分页

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="pragram" content="no-cache">
    <link rel="stylesheet" href="/css/group/base.css">
    <link rel="stylesheet" href="/css/group/product_list.css">
    <script type="text/javascript" src="/scripts/group/angular1.4.6.min.js"></script>
    <title>我的团</title>

</head>
<body>
<div ng-app="myGroups" ng-controller="groupsCtrl"  when-scrolled="get_more(1)">
<ul>
  <li>
    我的团
  </li>
  <li ng-repeat="x in groups">
     <div style="width:100px;float:left;">
         <img style="width:100px;height:100px;" src="{{ x.img_url}}" />
     </div>
     <div  style="width:200px;float:left;">
         <div><a href="details.aspx?groupsid={{ x.groups_Id}}">{{ x.act_name}}</a></div>
         <div>【{{ x.groups_size}}人团】</div>
         <div>{{ x.groups_price}}</div>
         <div>状态:{{ getState(x.groups_state)}}</div>
     </div>
      <div style="clear:both;"></div>
  </li>
</ul>
    总记录:{{ totalcount}}
    总页数:{{ totalpage}}
    当前页:{{ pageindex}}
<button ng-click="get_more(-1)">上一页</button>
<button ng-click="get_more(1)">下一页</button>
</div>

<script>
    var app = angular.module("myGroups",[]);
    app.controller("groupsCtrl",["$scope","$http",function($scope,$http){

        $scope.api=‘http://localhost:48732/groups/Default/GetGroupsByMobile‘;
        $scope.pageindex=0;
        $scope.pagesize = 10;
        $scope.totalpage = 0;
        $scope.totalcount = 0;
        $scope.mobile = ‘<%=mobile%>‘;
        $scope.groups = [];
        $scope.getState = function (state) {
            if (state == 0) {
                return "组团中"
            } else if (state == 1) {
                return "已完成"
            } else {
                return "组团失败"
            }
        }

        $scope.get_more = function (increase) {
            $scope.pageindex += increase;

            //if ($scope.pageindex<1) {
            //    $scope.pageindex = 1;
            //}
            //if ($scope.pageindex > $scope.totalpage && $scope.totalpage>0) {
            //    $scope.pageindex = $scope.totalpage;
           //}

            $http({
                method: "POST",
                url: $scope.api,
                data:‘mobile=‘+$scope.mobile+‘&pageindex=‘+$scope.pageindex+‘&pagesize=‘+$scope.pagesize,
                headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘
                }
            }).
			success(function (data, status) {
			    if (status == 200 && data.Success == ‘true‘) {
			        $scope.totalpage = data.data.TotalPage;
			        $scope.totalcount = data.data.TotalCount;
			        for (var i = 0; i < data.data.PageData.length; i++) {
			            $scope.groups.push(data.data.PageData[i]);
			        }
			        //$scope.groups = data.data.PageData;
			    }
			}).
			error(function(data, status) {

			});
        }//get_more END

        //第一次加载打开第一页数据
        $scope.get_more(1);
    }]);//controller END
</script>
</body>
</html>
时间: 2024-10-13 00:42:17

angular.js第一个项目 简单分页的相关文章

精通 Angular JS 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a

backbone.js初体验--构建简单分页应用时踩到的坑

最近突然想接触下之前没有接触过的领域,单页应用,正巧之前也是刚刚学习了requirejs的用法,所以趁热打铁选择了很多网站采用的requirejs+underscorejs+backbonejs+jquery(zepto)的方式来进行demo的编写. 这篇文章主要不是介绍怎么去构建一个分页效果的,也不会去讲述backbone的基础知识,而是分享在我构建分页效果时候踩到的一些坑. 1. collection不是必须的 首先,我在开始写的时候就陷入了一个问题,事实证明我真的是多虑了,就是不该用col

angular.js 分页

Angular.js+Bootstrap实现表格分页 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后分页显示. 1.表格是通过ng-repeat来展示的,代码如下: <table class="table table-bordered"> <

angular.js简单入门。

小弟刚接触angular js  就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> <head> <title>angularJS</title> </head> <script type="text/javascript" src="./js/angular.min.js"></s

angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 1 app.directive('pagePagination', function(){ 2 return {

angular.js学习的第一天

第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个angular.js的应用程序:ng-model指令则实现把对应的值 绑定到当前的应用程序:ng-bind 指令把应用程序数据绑定到 HTML 视图. <!DOCTYPE html><html lang="en"><head> <meta charset

[Cousera Angular JS学习笔记]第一周

最近在给搜索引擎做前台,开始学习Angular JS,直接上coursera上的课程:https://www.coursera.org/learn/angular-js/home/week/1(没有JS基础的同学可以和我一样先过下cousera的JS课程 Interacticity with JavaScript) 要先安装bower(方便获取JS),安装bower之前要先安装node JS (1) 安装nodejs过程直接参考http://czpae86.iteye.com/blog/1636

Angular js 之一些简单的js操作

1.<div ng-if()> </div> 括号里面是布尔值  如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会在controller里面来设置ng-if(abc)括号里面值得布尔值 ,类似$scope.abc=true; 如果你想默认一个值为true ,一般用于不常见 的一个字符然后设置ng-if(!abcd) 这样默认为true. 在实际操作中 遇到那种ng-repeat出来的值,需要判断排列或者是否显示的时候,

第一个项目angular小节

angular JS 开发移动apk controller:angular封装的ng-click事件出发controller中定义的绑在$scope的方法,调用相应的event event::负责业务逻辑,和代码实现,可以注入需要的service 使用service里面的方法. service:event 也是service的一种. model :dao层实现,为了实现sql在一个事物里面执行先预先取到sql文,通过flag控制是否执行以及其它                参数控制,执行完sq