Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta name="description" content="filter and pagination 1">
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="https://code.angularjs.org/1.2.14/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
  </head>
  <body>
    <section class="main" ng-controller="contentCtrl">    
      <div style="float: right; margin-right: 200px">
        has more than 3 letters <input type="checkbox" ng-model="criteria.number" ng-true-value="3" ng-false-value="0" /><br>
      </div>
      
      <h3>Existing friends</h3>
      <div ng-repeat="friend in filteredFriends | start: (currentPage - 1) * itemsPerPage | limitTo: itemsPerPage">
        {{friend.name}}
      </div>
      <pagination total-items="filteredFriends.length" items-per-page="itemsPerPage" ng-model="currentPage"></pagination>
    </section>
  </body>
</html>
​
 
var app = angular.module('plunker', ['ui.bootstrap']);
​
app.factory('friendsFactory', function() {
  var o = {
    friends: [ {"name":"Jack"}, {"name":"Tim"}, {"name":"Stuart"}, 
               {"name":"Tom"}, {"name":"Frank"}, {"name":"Nicholas"}, 
               {"name":"Jesse"}, {"name":"Amber"}, {"name":"Tom"},
               {"name":"Jerry"}, {"name":"Richard"}, {"name":"Mike"},
               {"name":"Michael"}, {"name":"Jim"}, {"name":"Louis"}]
  };
  
  return o;
});
​
app.controller('contentCtrl', function ($scope, friendsFactory) {
  $scope.friends = friendsFactory.friends;
​
  $scope.criteria = { number: 0 }
  $scope.filteredFriends = $scope.friends;
  $scope.itemsPerPage = 5
  $scope.currentPage = 1;
  
  function refresh() {
    $scope.filteredFriends = $scope.friends.filter(function(item){
      return item.name.length > $scope.criteria.number;
    })
  };
​
  $scope.$watch('currentPage', refresh);
  $scope.$watch('criteria.number', refresh);
});
​
app.filter('start', function () {
  return function (input, start) {
    if (!input || !input.length) { return; }
    
    return input.slice(start);
  };
});
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chengtiepro
0viewers