<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-orderBy-dynamic-production</title>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <!-- <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9-build.5153/angular.min.js"></script> -->
    <script src="script.js"></script>
  </head>

  <body ng-app="orderByExample2">
    <div ng-controller="ExampleController">
      <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
      <hr />
      <button ng-click="propertyName = null; reverse = false">Set to unsorted</button>
      <hr />
      <table class="friends">
        <tbody>
          <tr>
            <th>
              <button ng-click="sortBy('name')">Name</button>
              <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
            </th>
            <th>
              <button ng-click="sortBy('phone')">Phone Number</button>
              <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span>
            </th>
            <th>
              <button ng-click="sortBy('age')">Age</button>
              <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span>
            </th>
          </tr>
          <tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
            <td>{{friend.age}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
  </body>

</html>

(function(angular) {
  'use strict';
angular.module('orderByExample2', [])
  .controller('ExampleController', ['$scope', function($scope) {
    var friends = [
      {name: 'John',   phone: '555-1212',  age: 0},
       {name: 'Julie',  phone: '555-8765',  age: 0},
      {name: 'Mary',   phone: '555-9876',  age: 0},
      {name: 'Mike',   phone: '555-4321',  age: 0},
      {name: 'Adam',   phone: '555-5678',  age: 0},
     
    ];

    $scope.propertyName = 'age';
    $scope.reverse = true;
    $scope.friends = friends;

    $scope.sortBy = function(propertyName) {
      $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
      $scope.propertyName = propertyName;
    };
  }]);
})(window.angular);

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
.friends {
  border-collapse: collapse;
}

.friends th {
  border-bottom: 1px solid;
}
.friends td, .friends th {
  border-left: 1px solid;
  padding: 5px 10px;
}
.friends td:first-child, .friends th:first-child {
  border-left: none;
}

.sortorder:after {
  content: '\25b2';   // BLACK UP-POINTING TRIANGLE
}
.sortorder.reverse:after {
  content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
// Element locators
var unsortButton = element(by.partialButtonText('unsorted'));
var nameHeader = element(by.partialButtonText('Name'));
var phoneHeader = element(by.partialButtonText('Phone'));
var ageHeader = element(by.partialButtonText('Age'));
var firstName = element(by.repeater('friends').column('friend.name').row(0));
var lastName = element(by.repeater('friends').column('friend.name').row(4));

it('should sort friends by some property, when clicking on the column header', function() {
  expect(firstName.getText()).toBe('Adam');
  expect(lastName.getText()).toBe('John');

  phoneHeader.click();
  expect(firstName.getText()).toBe('John');
  expect(lastName.getText()).toBe('Mary');

  nameHeader.click();
  expect(firstName.getText()).toBe('Adam');
  expect(lastName.getText()).toBe('Mike');

  ageHeader.click();
  expect(firstName.getText()).toBe('John');
  expect(lastName.getText()).toBe('Adam');
});

it('should sort friends in reverse order, when clicking on the same column', function() {
  expect(firstName.getText()).toBe('Adam');
  expect(lastName.getText()).toBe('John');

  ageHeader.click();
  expect(firstName.getText()).toBe('John');
  expect(lastName.getText()).toBe('Adam');

  ageHeader.click();
  expect(firstName.getText()).toBe('Adam');
  expect(lastName.getText()).toBe('John');
});

it('should restore the original order, when clicking "Set to unsorted"', function() {
  expect(firstName.getText()).toBe('Adam');
  expect(lastName.getText()).toBe('John');

  unsortButton.click();
  expect(firstName.getText()).toBe('John');
  expect(lastName.getText()).toBe('Julie');
});

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/