GitHub Issues with AngularJS

by Varun Krishna P

HTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl1">
        
<h1 class="lead">AngularJS GitHub Issues</h1>

        <div class="well" ng-show="myData.currentIssue == null">
            <form class="form-search pull-right">
                <div class="input-append">
                    <input type="text" ng-model="filterText" class="span2 search-query" placeholder="Filter current page">
                    <button ng-click="filterText = null" class="btn">Clear Filter</button>
                </div>
            </form>
            <label>Issue State</label>
            <select ng-model="myData.issueListState" ng-change="setIssueList()">
                <option value="open">Open</option>
                <option value="closed">Closed</option>
            </select>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="span1">Number</th>
                        <th class="span2 sortable" ng-class="sortClass('created')" ng-click="setSort('created')">Created</th>
                        <th class="span2 sortable" ng-class="sortClass('updated')" ng-click="setSort('updated')">Updated</th>
                        <th class="span1 sortable" ng-class="sortClass('comments')" ng-click="setSort('comments')">Comments</th>
                        <th class="span1">State</th>
                        <th class="span2">Reporter</th>
                        <th>Title</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="issue in myData.issueList | filter:filterText">
                        <td class="text-center"><a ng-click="setCurrentIssue(issue.number)">{{issue.number}}</a>

                        </td>
                        <td class="text-center">{{issue.created_at | date:'short'}}</td>
                        <td class="text-center">{{issue.updated_at | date:'short'}}</td>
                        <td...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://code.angularjs.org/1.0.7/angular.min.js"></script> <script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <style> a {
    cursor: pointer;
}
thead {
    cursor: pointer;
}
th.sortable {
    color: #0088cc;
}
td {
    padding: 0.2em 1em;
}
td.open {
    color: darkgreen;
}
td.closed {
    color: maroon;
}
.sort-desc {
    background:no-repeat right center url(data:image/gif;
    base64,...

JavaScript

angular.module('myApp', ['ngResource']).
factory('AngularIssues', function ($resource) {
    return $resource('https://api.github.com/repos/angular/angular.js/issues/:number', {
        number: '@number'
    }, {
        getIssue: {
            method: 'GET',
            params: {
                number: 0
            }
        }
    })
}).
controller('MyCtrl1', ['$scope', 'AngularIssues', function (scope, AI) {
    scope.myData = {
        currentIssue: null,
        issueList: [],
        issueListState: 'open',
        issueListSort: 'created',
        issueListDirection: 'desc',
        issueListPage: 1
    };

    scope.setIssueList = function () {
        AI.query({
            state: scope.myData.issueListState,
            //labels: scope.myData.labels,
            sort: scope.myData.issueListSort,
            direction: scope.myData.issueListDirection
        }, function (data) {
            scope.myData.issueList = data;
        });
    };

    scope.setSort = function (sort) {
        var oldSort = angular.copy(scope.myData.issueListSort);
        scope.myData.issueListSort = sort;
        if (oldSort == sort) {
            scope.setDirection(scope.myData.issueListDirection == 'desc' ? 'asc' : 'desc');
        } else {
            scope.setDirection('desc');
        }
    };

    scope.setDirection = function (direction) {
        scope.myData.issueListDirection = direction;
        scope.setIssueList();
    };

    scope.sortClass = function (column) {
        return column == scope.myData.issueListSort && 'sort-' + scope.myData.issueListDirection;
    };

    scope.setCurrentIssue = function (number) {
        AI.getIssue({
            number: number
        }, function (data) {
            scope.myData.currentIssue = data;
        });
    };

    scope.showAll = function () {
        scope.myData.currentIssue = null;
    };

    scope.setIssueList();
}]);