PRIDE Archive Search

by Jose A Dianes

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container" ng-app="prideSearchApp">
    <div ng-controller="PrideSearchCtrl">Search:
        <input ng-model="query" type="text" />
        <table class="table">
            <tr>
                <th> <a href="" ng-click="sortField ='accession'; reverse = !reverse">Accession</a>
                </th>
                <th> <a href="" ng-click="sortField = 'publicationDate'; reverse = !reverse">Publication date</a>
                </th>
                <th> <a href="" ng-click="sortField = 'species'; reverse = !reverse">Species</a>
                </th>
                <th> <a href="" ng-click="sortField = 'title'; reverse = !reverse">Title</a>
                </th>
            </tr>
            <tr ng-repeat="project in projects | filter:query | orderBy:sortField:reverse">
                <td>{{project.accession}}</td>
                <td>{{project.publicationDate}}</td>
                <td>{{project.species}}</td>
                <td>{{project.title}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript

var archiveWsUrl = "http://www.ebi.ac.uk/pride/ws/archive/project/list?show=1000&callback=JSON_CALLBACK";
var prideSearchApp = angular.module('prideSearchApp', []);

prideSearchApp.controller('PrideSearchCtrl', function ($scope, $http) {
    $http.jsonp(
    archiveWsUrl).success(function (data) {
        $scope.projects = data.list;
    });
    $scope.sortField = 'publicationDate';
    $scope.reverse = true;
});