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="githubApp">
<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-resource.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="ListCtrl">
  <div id="header">
  <h2>AngularJS Issues</h2>
    <p>Github's API is rate limited, if the example doesn't work, you may want to try again in a few minutes.
  </div>
  <form ng-submit="updateList()">
  Search: <input ng-model="query">
</form>
  
​
<table class="table">
  <thead>
    <th>id</th>
    <th>title</th>
    <th>state <select ng-model="state">
      <option value="" selected="selected">All</option>
      <option value="open">Open</option><option value="closed">Closed</option></th>
    <th ng-repeat="head in headers" ng-click="$parent.sort = head" ng-class="{sort: sort === head, sortable:true}">
      {{head}} <b class="sort-caret"></b>
    </th>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td><a ng-href="{{item.url}}">{{item.id}}</td>
      <td>{{item.title}}</td>
      <td>{{item.state}}</td>
      <td>{{item.comments}}</td>
      <td>{{item.created_at}}</td>
​
    </tr>
  </tbody>
  </table>
​
  <ul class="pager">
    <li>
        <select title="Page Size" ng-model="perPage">
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
  </select>
    </li>
    <li ng-click="previousPage()" ng-class="{disabled:page == 1}">
      <a>Previous</a>
    </li>
    <li ng-click="nextPage()" ng-class="{disabled:page==lastPage}">
      <a>Next</a>
    </li>
    <li>
      {{page}}/{{lastPage}}
    </li>
  </ul>
​
</body>
</html>
 
.sortable{
  cursor:pointer;
  color:#428BCA;
}
.sortable:hover{
  text-decoration:underline;
}
#header {
  text-align:center;
}
body{
  margin:10px;
}
.sort-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.3em;
  border: 0;
  content: "";
}
​
.sort .sort-caret {
  vertical-align: super;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: none;
  border-left: 4px solid transparent;
}
 
var githubApp = angular.module('githubApp', ['ngResource']);
                                
githubApp.controller('ListCtrl', function($scope, $resource) {
  $scope.sort = "id";
  $scope.page = 1;
  $scope.perPage = 10;
  $scope.query = '';
  $scope.state = '';
  $scope.headers = ['comments','created'];
  var api = $resource(
    'https://api.github.com/search/issues',
    {per_page:10,q:"repo:angular/angular.js"},
    {query: {method:'GET', isArray:false}});
  
  $scope.updateList = function(){
    var query = $scope.query+" in:title repo:angular/angular.js";
    if ($scope.state){
      query += " state:"+$scope.state;
    }
    api.query({
      sort:$scope.sort,
      page:$scope.page,
      per_page:$scope.perPage,
      q:query
    }, function(data){
      $scope.items = data.items;
      $scope.lastPage = Math.ceil(data.total_count/$scope.perPage);
    });
  };
  $scope.$watchCollection('[state, page,sort,perPage]',function(){
    $scope.updateList();
  });
  $scope.nextPage = function(){
    if ($scope.lastPage !== $scope.page){
      $scope.page++;
    }
  };
  $scope.previousPage = function(){
    if ($scope.page !== 1){
      $scope.page++;
    }
  };
    
​
  
​
 });
Output 300px

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

Dismiss x
public
Bin info
ryanstaffordpro
0viewers