JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<div ng-app>
     <h2>Pets </h2>

    <div ng-controller="CatListCtrl">
        <h3>Cats</h3>
        <span data-ng-if="sortField">Sorting by {{sortField}} | </span>
        <a href="" ng-click="resetSort()">Unsort</a>
        <table class="table">
            <tr>
                <th ng-click="sort('name')">Name</th>
            </tr>
            <tr ng-repeat="pet in pets | orderBy:sortField:reverse">
                <td>{{pet.name}}</td>
            </tr>
        </table>
    </div>
    
    <hr/>
    
    <div ng-controller="DogListCtrl">
        <h3>Dogs</h3>
        <span data-ng-if="sortField">Sorting by {{sortField}} | </span>
        <a href="" ng-click="resetSort()">Unsort</a>
        <table class="table">
            <tr>
                <th ng-click="sort('name')">Name</th>
            </tr>
            <tr ng-repeat="pet in pets | orderBy:sortField">
                <td>{{pet.name}}</td>
            </tr>
        </table>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<style>

JavaScript

// Basic pet object with name and pet type.
function Pet(name) {
    this.name = name;
}

// The generic list controller that contains sorting.
function PetListCtrl($scope) {
    $scope.sort = this.sort;

    $scope.resetSort = function() {
        $scope.sortField = null;
    }
}
PetListCtrl.prototype.sort = function(sortField) {
    this.sortField = sortField;
}

function CatListCtrl($scope) {
    PetListCtrl.call(this, $scope);

    $scope.pets = [
        new Pet('General Snuggles'),
        new Pet('Mittens'), 
        new Pet('Fluffyface')
    ]
}
CatListCtrl.prototype = Object.create(PetListCtrl.prototype);

function DogListCtrl($scope) {
    PetListCtrl.call(this, $scope);

    $scope.pets = [
        new Pet('Pinky'),
        new Pet('Apples'),
        new Pet('Killer')
    ]
}
DogListCtrl.prototype = Object.create(PetListCtrl.prototype);