QwNWJO

index.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>

<div ng-app="meltdsp">
  <div ng-controller="filterControl">
    <div>Filter:</div>
    <ul>
      <li><a href="" ng-click="setFilter('')">All</a></li>
      <li><a href="" ng-click="setFilter('active')">Active</a></li>
      <li><a href="" ng-click="setFilter('paused')">Paused</a></li>
      
    </ul>
    <table>
      <thead>
        <th><a href="#" ng-click="setOrder('name')">Name</a></th>
        <th><a href="#" ng-if="filterBy === ''" ng-click="setOrder('status')">Status</a></th>
        <th>Count</th>
        <th>Action</th>
      </thead>
      <tbody>
        <tr ng-repeat="d in data | filter: {status: filterBy} | orderBy: order ">
          <td>{{d.name}}</td>
          <td ng-if="filterBy === ''">{{d.status}}</td>
          <td>{{d.i}}</td>
          <td ng-class="{'set-active': d.status == 'active','set-paused': d.status == 'paused'}">Action</td>
        </tr>
      </tbody>   
  </div>
</div>

QwNWJO.markdown

QwNWJO

A Pen by Captain Anonymous on CodePen.

License.

script.js

var meltdspApp = angular.module('meltdsp', []);

meltdspApp.factory('LP', [function($resource) {
  return function() { console.log('Ha!') };
  
}]);

meltdspApp.controller('filterControl', ['$scope', 'LP', function($scope, LP) {
  $scope.filterBy='';
  $scope.data = [
    {name:'LP1', status:'active', i: 10},
    {name:'LP2', status:'active', i: 200},
    {name:'LP3', status:'paused', i: 50},
    {name:'LP4', status:'active', i: 100},
    {name:'LP5', status:'paused', i: 1}
  ]
  $scope.setFilter = function(filterStatus) {
    $scope.filterBy=filterStatus;
  }
  $scope.setOrder = function(ord) {
    $scope.order=ord;
  }
  console.log(LP);
}]);

style.css

.set-active {
  font-size: 10px;
}
.set-paused {
  font-size: 5px;
}