Angular Searchable/Sortable NFL Table

Search by any keyword found in the table e.g., City, Mascot, Team, Stadium...

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!-- Font Awesome  -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div ng-app="my-app" ng-controller="my-ctrl">
  <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #e62a39">
    <span class="navbar-brand" href="#">
      <span class="fas fa-globe mr-2"></span>Angular Searchable Sortable Table
    </span>
  </nav>
  <div class='container-fluid py-5'>
    <label>Search By Team, City, State, Stadium, Division... <input ng-model="searchText" class="form-control" placeholder="ex. NFC West"></label>
    <table id="searchTextResults" class="table table-striped ">
      <thead class="bg-dark text-white">
        <tr>
          <th>
            <a ng-click="sortBy('team')">Team</a>
            <span class="sortorder" ng-show="propertyName === 'team'" ng-class="{reverse: reverse}"></span>
          </th>
          <th>
            <a ng-click="sortBy('city')">City</a>
            <span class="sortorder" ng-show="propertyName === 'city'" ng-class="{reverse: reverse}"></span>
          </th>
          <th>
            <a ng-click="sortBy('stadium')">Stadium</a>
            <span class="sortorder"...

CSS

/* Styles go here */

a {
  cursor: pointer;
}

.sortorder:after {
  content: '\25b2';
}

.sortorder.reverse:after {
  content: '\25bc';
}

TypeScript

angular.module('my-app', [])
   .controller('my-ctrl', ['$scope', function($scope) {
     var teams = [{
         team: 'Arizona Cardinals',
         city: 'Arlington, TX',
         stadium: 'State Farm Stadium',
         division: 'NFC West'
       },
       {
         team: 'Los Angeles Rams',
         city: 'Los Angeles, CA',
         stadium: 'Los Angeles Memorial Coliseum',
         division: 'NFC West'
       },
       {
         team: 'San Francisco 49ers',
         city: 'Santa Clara, CA',
         stadium: 'Levi\'s',
         division: 'NFC West'
       },
       {
         team: 'Seattle Seahawks',
         city: 'Seattle, WA',
         stadium: 'CenturyLink Field',
         division: 'NFC West'
       },

       {
         team: 'Dallas Cowboys',
         city: 'Arlington, TX',
         stadium: 'AT&T Stadium',
         division: 'NFC East'
       },
       {
         team: 'New York Giants',
         city: 'East Rutherford, NJ',
         stadium: 'MetLife Stadium',
         division: 'NFC East'
       },
       {
         team: 'Philadelphia Eagles',
         city: 'Philadelphia, PA',
         stadium: 'Lincoln Financial Field',
         division: 'NFC East'
       },
       {
         team: 'Washington Redskins',
         city: 'Landover, MD',
         stadium: 'FedExField',
         division: 'NFC East'
       },

       {
         team: 'Chicago Bears',
         city: 'Chicago, IL',
         stadium: 'Soldier Field',
         division: 'NFC North'
       },
       {
         team: 'Detroit Lions',
         city: 'Detroit  MI',
         stadium: 'Ford Field',
         division: 'NFC North'
       },
       {
         team: 'Green Bay Packers',
         city: 'Green Bay, WI',
         stadium: 'Lambeau Field',
         division: 'NFC North'
       },
       {
         team: 'Minnesota Vikings',
         city: 'Minneapolis, MN',
         stadium: 'U.S. Bank Stadium',
         division: 'NFC North'
       },

       {
         team: 'Atlanta Falcons',
...