[Angularjs]单页应用之分页

<script>
    <span style="color: #0000ff;"&gt;var</span> app = angular.module(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;myapp</span><span style="color: #800000;"&gt;'</span>,[<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;infinite-scroll</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;]);
    app.controller(</span><span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;PersonController</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,function ($scope,$http) {

        $scope.data </span>=<span style="color: #000000;"&gt; {
            busy: </span><span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;,users: [],page: </span><span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;
        };
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;加载更多</span>
        $scope.loadMore =<span style="color: #000000;"&gt; function () {
            </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;是否正在加载</span>
            <span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; ($scope.data.busy) {
                </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt;;
            }
            $scope.data.busy </span>= <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;
            $http.</span><span style="color: #0000ff;"&gt;get</span>(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;/Service/UserInfo.ashx?page=</span><span style="color: #800000;"&gt;"</span> +<span style="color: #000000;"&gt; $scope.data.page).success(function (data) {
                console.log(data);
                </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = <span style="color: #800080;"&gt;0</span>; i < data.length; i++<span style="color: #000000;"&gt;) {
                    $scope.data.users.push(data[i]);
                }
            });
            $scope.data.busy </span>= <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
            $scope.data.page</span>++<span style="color: #000000;"&gt;;
        }
    });
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;过滤器</span>
    app.filter(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;toGenderString</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,function () {
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; function (input) {
            </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt; (input) {
                </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;男</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;;
            } </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; {
                </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;女</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;;
            }
        };
    });
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;将json格式的时间转换成一般时间</span>
    app.filter(<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;formatDate</span><span style="color: #800000;"&gt;'</span><span style="color: #000000;"&gt;,function () {
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; function (jsondate) {
            jsondate </span>= jsondate.replace(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;/Date(</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;""</span>).replace(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;)/</span><span style="color: #800000;"&gt;"</span>,<span style="color: #800000;"&gt;""</span><span style="color: #000000;"&gt;);
            </span><span style="color: #0000ff;"&gt;if</span> (jsondate.indexOf(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;+</span><span style="color: #800000;"&gt;"</span>) > <span style="color: #800080;"&gt;0</span><span style="color: #000000;"&gt;) {
                jsondate </span>= jsondate.substring(<span style="color: #800080;"&gt;0</span>,jsondate.indexOf(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;+</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));
            } </span><span style="color: #0000ff;"&gt;else</span> <span style="color: #0000ff;"&gt;if</span> (jsondate.indexOf(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;-</span><span style="color: #800000;"&gt;"</span>) > <span style="color: #800080;"&gt;0</span><span style="color: #000000;"&gt;) {
                jsondate </span>= jsondate.substring(<span style="color: #800080;"&gt;0</span>,jsondate.indexOf(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;-</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;));
            }
            </span><span style="color: #0000ff;"&gt;var</span> date = <span style="color: #0000ff;"&gt;new</span> Date(parseInt(jsondate,<span style="color: #800080;"&gt;10</span><span style="color: #000000;"&gt;));
            </span><span style="color: #0000ff;"&gt;var</span> month = date.getMonth() + <span style="color: #800080;"&gt;1</span> < <span style="color: #800080;"&gt;10</span> ? <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;0</span><span style="color: #800000;"&gt;"</span> + (date.getMonth() + <span style="color: #800080;"&gt;1</span>) : date.getMonth() + <span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;;
            </span><span style="color: #0000ff;"&gt;var</span> currentDate = date.getDate() < <span style="color: #800080;"&gt;10</span> ? <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;0</span><span style="color: #800000;"&gt;"</span> +<span style="color: #000000;"&gt; date.getDate() : date.getDate();
            </span><span style="color: #0000ff;"&gt;return</span> date.getFullYear() + <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;-</span><span style="color: #800000;"&gt;"</span> + month + <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;-</span><span style="color: #800000;"&gt;"</span> +<span style="color: #000000;"&gt; currentDate;

        };
    });
</span></script>
<style type=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;text/css</span><span style="color: #800000;"&gt;"</span>>
    *<span style="color: #000000;"&gt; {
        margin: </span><span style="color: #800080;"&gt;0</span><span style="color: #000000;"&gt;;
        padding: </span><span style="color: #800080;"&gt;0</span><span style="color: #000000;"&gt;;
    }

    div {
        width: </span><span style="color: #800080;"&gt;98</span>%<span style="color: #000000;"&gt;;
        border: 1px solid #0094ff;
        text</span>-<span style="color: #000000;"&gt;align: center;
    }

    table {
        margin: 3px auto;
        border: 0px solid #0094ff;
    }

    td {
        height: 30px;
    }
</span></style>

    <div infinite-scroll=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;loadMore()</span><span style="color: #800000;"&gt;"</span> infinite-scroll-disabled=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;data.busy</span><span style="color: #800000;"&gt;'</span> infinite-scroll-distance=<span style="color: #800000;"&gt;'</span><span style="color: #800000;"&gt;20</span><span style="color: #800000;"&gt;'</span>>
        <table cellpadding=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;0</span><span style="color: #800000;"&gt;"</span> cellspacing=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;0</span><span style="color: #800000;"&gt;"</span> border=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;1</span><span style="color: #800000;"&gt;"</span>>
            <tr&gt;<th>序号</th><th>姓名</th><th>创建时间</th><th>性别</th></tr&gt;
            <tr ng-repeat=<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;user in data.users</span><span style="color: #800000;"&gt;"</span>>
                <td&gt;{{user.ID}}</td&gt;
                <td&gt;{{user.Name}} </td&gt;
                <td&gt;{{user.CreateDate|formatDate}}</td&gt;
                <td&gt;{{user.Gender|toGenderString}}</td&gt;
            </tr&gt;
        </table&gt;
    </div>
</div>

    </span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;void</span><span style="color: #000000;"&gt; ProcessRequest(HttpContext context)
    {
        </span><span style="color: #0000ff;"&gt;int</span> page = Convert.ToInt32(context.Request[<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;page</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;]);
        </span><span style="color: #0000ff;"&gt;int</span> pageSize = <span style="color: #800080;"&gt;20</span><span style="color: #000000;"&gt;;
        context.Response.ContentType </span>= <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;application/json</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;;
        List</span><Person> lstPersons = <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;;
        </span><span style="color: #0000ff;"&gt;var</span> obj = context.Cache.Get(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;persons</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;);
        </span><span style="color: #0000ff;"&gt;if</span> (obj == <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;)
        {
            lstPersons </span>= <span style="color: #0000ff;"&gt;new</span> List<Person><span style="color: #000000;"&gt;();
            </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;int</span> i = <span style="color: #800080;"&gt;0</span>; i < <span style="color: #800080;"&gt;1000</span>; i++<span style="color: #000000;"&gt;)
            {
                lstPersons.Add(</span><span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; Person()
                {
                    ID </span>= i + <span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;,Gender </span>= i % <span style="color: #800080;"&gt;2</span> == <span style="color: #800080;"&gt;0</span> ? <span style="color: #0000ff;"&gt;true</span> : <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;,Name </span>= <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;wolfy</span><span style="color: #800000;"&gt;"</span> + (i + <span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;).ToString()
                });
            }
            context.Cache.Insert(
                </span><span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;persons</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;,lstPersons,</span><span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;,DateTime.Now.AddSeconds(</span><span style="color: #800080;"&gt;20</span><span style="color: #000000;"&gt;),Cache.NoSlidingExpiration,CacheItemPriority.Low,CacheItemRemovedCallback);
        }
        </span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;
        {
            lstPersons </span>= obj <span style="color: #0000ff;"&gt;as</span> List<Person><span style="color: #000000;"&gt;;
        }

        JavaScriptSerializer jss </span>= <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; JavaScriptSerializer();
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;分页</span>
        <span style="color: #0000ff;"&gt;var</span> pageList = lstPersons.Skip(pageSize * (page - <span style="color: #800080;"&gt;1</span><span style="color: #000000;"&gt;)).Take(pageSize);
        </span><span style="color: #0000ff;"&gt;string</span> json =<span style="color: #000000;"&gt; jss.Serialize(pageList);
        context.Response.Write(json);
    }
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;这个为缓存移除时的回调函数，一定要保持与 Cache.Insert（）方法中的最后一个参数名字一致，
    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;这里使用了委托，你可以在 Cache.Insert（）这个函数中转定义看到的，所以这里的格式就只能按我写的这种方法签名写。</span>
    <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;static</span> <span style="color: #0000ff;"&gt;void</span> CacheItemRemovedCallback(<span style="color: #0000ff;"&gt;string</span> key,<span style="color: #0000ff;"&gt;object</span><span style="color: #000000;"&gt; value,CacheItemRemovedReason reason)

    {

    }

    </span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;bool</span><span style="color: #000000;"&gt; IsReusable
    {
        </span><span style="color: #0000ff;"&gt;get</span><span style="color: #000000;"&gt;
        {
            </span><span style="color: #0000ff;"&gt;return</span> <span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;;
        }
    }
}
</span><span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;class</span><span style="color: #000000;"&gt; Person
{
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;<summary></span>
    <span style="color: #808080;"&gt;///</span><span style="color: #008000;"&gt; 编号
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;</summary></span>
    <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;int</span> ID { <span style="color: #0000ff;"&gt;set</span>; <span style="color: #0000ff;"&gt;get</span><span style="color: #000000;"&gt;; }
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;<summary></span>
    <span style="color: #808080;"&gt;///</span><span style="color: #008000;"&gt; 姓名
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;</summary></span>
    <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;string</span> Name { <span style="color: #0000ff;"&gt;set</span>; <span style="color: #0000ff;"&gt;get</span><span style="color: #000000;"&gt;; }
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;<summary></span>
    <span style="color: #808080;"&gt;///</span><span style="color: #008000;"&gt; 创建时间
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;</summary></span>
    <span style="color: #0000ff;"&gt;public</span> DateTime CreateDate { <span style="color: #0000ff;"&gt;set</span>; <span style="color: #0000ff;"&gt;get</span>; } =<span style="color: #000000;"&gt; DateTime.Now;
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;<summary></span>
    <span style="color: #808080;"&gt;///</span><span style="color: #008000;"&gt; 性别，true 男 false 女
    </span><span style="color: #808080;"&gt;///</span> <span style="color: #808080;"&gt;</summary></span>
    <span style="color: #0000ff;"&gt;public</span> <span style="color: #0000ff;"&gt;bool</span> Gender { <span style="color: #0000ff;"&gt;set</span>; <span style="color: #0000ff;"&gt;get</span>; } = <span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;;

}

总结

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!