AngularJS filtered list demo

Sample app from http://angular.github.io/angular-phonecat/step-12/app/#/phones. Strips our the phone detail view.

by Matt Diebolt

HTML

<link rel="stylesheet" href="http://angular.github.io/angular-phonecat/step-12/app/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="http://angular.github.io/angular-phonecat/step-12/app/css/app.css">
<link rel="stylesheet" href="http://angular.github.io/angular-phonecat/step-12/app/css/animations.css">
<script src="http://angular.github.io/angular-phonecat/step-12/app/bower_components/jquery/jquery.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-12/app/bower_components/angular/angular.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-12/app/bower_components/angular-animate/angular-animate.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-12/app/bower_components/angular-route/angular-route.js"></script>
<script src="http://angular.github.io/angular-phonecat/step-12/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="http://www.hamlet.coffee/javascripts/phones.js"></script>
<div ng-app="phonecatApp">
    <script type=text/ng-template id=phones.html>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-2">
              Search: <input ng-model="query">
              Sort by:
              <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
              </select>
            </div>
            <div class="col-md-10">
              <ul class="phones">
                <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
                    class="thumbnail phone-listing">
                  <img class="thumb" ng-src="http://angular.github.io/angular-phonecat/step-11/app/img/{{phone.imageUrl}}">
                  <div>{{phone.name}}</div>
                  <p>{{phone.snippet}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
    </script>
      ...

CSS

.col-md-2 {
    margin-bottom: 1em;
}

JavaScript

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers',
  'phonecatServices',
  'phonecatAnimations'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'phones.html',
        controller: 'PhoneListCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);

/* Animations */

var phonecatAnimations = angular.module('phonecatAnimations', ['ngAnimate']);

phonecatAnimations.animation('.phone', function() {
  var animateUp = function(element, className, done) {
    if(className != 'active') {
      return;
    }
    element.css({
      position: 'absolute',
      top: 500,
      left: 0,
      display: 'block'
    });

    jQuery(element).animate({
      top: 0
    }, done);

    return function(cancel) {
      if(cancel) {
        element.stop();
      }
    };
  }

  var animateDown = function(element, className, done) {
    if(className != 'active') {
      return;
    }
    element.css({
      position: 'absolute',
      left: 0,
      top: 0
    });

    jQuery(element).animate({
      top: -500
    }, done);

    return function(cancel) {
      if(cancel) {
        element.stop();
      }
    };
  }

  return {
    addClass: animateUp,
    removeClass: animateDown
  };
});

/* Controllers */

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = phones;
    $scope.orderProp = 'age';
  }]);

/* Filters */

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

/* Services */

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
  ...