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="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
  <script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
  <link href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script id="/partials/paged-list.html" type="text/ng-template">
    <div class="content">
      <table class="table table-bordered table-striped table-animated">
        <tr ng-repeat="item in data | page:_currPage:pageSize" transclude>
        </tr>
      </table>
    </div>
  </script>
  <script id="/partials/auto-pagination.html" type="text/ng-template">
    <pagination num-pages="numPages" current-page="currentPage" previous-text="{{previousText}}" next-text="{{nextText}}" class="pagination"></pagination>
  </script>
</head>
<body ng-controller="Ctrl">
  
  {{test.length}} records | {{test | pages: pageSize}} pages
  
  <hr>
  
  <script type="text/marco">
      <td>{{$index}}</td>
      <td>{{item}}</td>
   </script>
  
  <div class="well">
    <paged-list data="test" current-page="currentPage" page-size="pageSize">
      <script type="text/html">
      <td>{{$index}}</td>
      <td>{{item}}</td>
      </script>
    </paged-list>
  </div>
  
  <auto-pagination data="test" page-size="pageSize" current-page="currentPage" previous-text="Anterior" next-text="Seguinte">
  </auto-pagination>
  
   
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
marco.m.alvespro
0viewers