zoukankan      html  css  js  c++  java
  • angularjs 中实现 load more 功能

    在UI 我们经常需要render 一些集合, 如果集合数据过多,那我们可能会采取分页的解决方案,本文是另外一种解决方法,就是当集合数量大于一定数量的时候显示一个 加载更多按钮,点击后,自动加载指定数量的数据。

    1. 首先我们创建一个angularjs 页面,让他显示 10条记录:

    Html page

    <div ng-app="APP">
        <h2>angularjs page</h2>
        <div ng-controller="userController">
              <div ng-repeat="user in users">
                {{user.fname}} {{user.lname}}  {{user.zip}} 
            </div>
        </div>
        <hr />
    </div>

    Js file, 在这里我使用了filltext 这个api 来返回模拟数据

    var APP = angular.module('APP', []).
    controller('userController', function ($scope,$http) {
           $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}").
        success(function (data) {
            $scope.users = data
        })
    });

    点击地址看预览效果: http://jsfiddle.net/vyhwb3t2/5/

    2. 在html page 添加

     <div><button ng-click="loadMore()">load more</button></div>

    3. 在controller 添加

    $scope.loadMore = function(){
      $http.jsonp("http://www.filltext.com/?callback=JSON_CALLBACK&rows=10&fname={firstName}&lname={lastName}&zip={zip}").
      success(function (data) {
        $scope.users = $scope.users.concat(data);
      }
    );

    ok, 大功告成,是不是非常简单。当然了,在实际情况中,我们还需要根据记录的情形,做些调整,比如显示剩余的记录条数,等数据都加载出来后,就隐藏掉load more 按钮等。

    最后 完整代码: http://jsfiddle.net/vyhwb3t2/6/

    预览图: 



  • 相关阅读:
    关于DOM节点的逆序
    javascript 巧妙的数组去重
    Canvas 学习笔记1
    web前端开发规范
    关于使用new和不使用new
    先知JS分享第二讲 数据类型与操作符
    关于谷歌console的小技巧
    菜鸟读jQuery 2.0.3 源码分析系列(2)
    菜鸟读jQuery 2.0.3 源码分析系列(1)
    local npm module ("*****") not found
  • 原文地址:https://www.cnblogs.com/slardar1978/p/4203472.html
Copyright © 2011-2022 走看看