angularjs - Set initial state of ng-show for orderBy in Angular

Question

Trying to set the initial state of an arrow that I am showing for a list that is sortable. There are three columns and each one has a link bound to an ng-click that when clicked will sort the list.

It's working as I need it to but the state of the up and down arrows do not show until clicked. And when I click one the other disappears. What I would like is for all the arrows to always show even before the user clicks and for each one to change direction on click of any of the three.

The basic link is this:

<a href="javascript:void(0)" ng-click="orderByField='dateAdded'; reverseSort = !reverseSort" class="ghostButtonSort dateLabel flrt">Date Received
    <span ng-show="orderByField == 'dateAdded'">
        <span ng-show="!reverseSort">^</span>
        <span ng-show="reverseSort">v</span>
    </span>
</a>

And right now I just have a basic setup in the scope:

$scope.orderByField = 'conditionId';

Answer 1

Initialize the values with defaults in your controller:

$scope.orderByField = 'dateAdded';
$scope.reverseSort = false;

Here's a simple Fiddle that demonstrates working sorting behavior: http://jsfiddle.net/kxotrmj6/2/

In this demo you can change the sort column by clicking on column headings, and change the sort direction by clicking on the caret that appears next to the active sort column. This is achieved with:

HTML

<table id='peopleTable'>
  <thead>
      <th>
          <a href="#" ng-click="sortOn = 'firstName'">First Name</a> 
          <i class="fa"
             ng-click="sortReverse = !sortReverse"
             ng-show="sortOn == 'firstName'"
             ng-class="sortReverse ? 'fa-caret-down' : 'fa-caret-up'">
             </i>
      </th>
      <!-- snip -->
  </thead>
  <tbody>
      <tr ng-repeat='person in people | orderBy:sortOn:sortReverse'>
          <td>{{person.firstName}}</td>
          <td>{{person.lastName}}</td>
          <td>{{person.favoriteColor}}</td>
      </tr>
  </tbody>
</table>

Controller

function MyCtrl($scope) {
    $scope.sortOn = 'lastName';
    $scope.sortReverse = false;

    $scope.people = [
        {
            firstName: 'Joe',
            lastName: 'Smith',
            favoriteColor: 'Orange'
        }, {
            firstName: 'Jane',
            lastName: 'Doe',
            favoriteColor: 'Gray'
        }, {
            firstName: 'Zoey',
            lastName: 'Tester',
            favoriteColor: 'Blue'
        }];
}

I'm using FontAwesome for the carets, but you can use text, or images. sortReverse and sortOn are both initialized in the controller, so they have default values and will always be reflected in the UI.

Answer 2

Add you default value using ng-init like below

<a href="javascript:void(0)" ng-click="orderByField='dateAdded'; reverseSort = !reverseSort" class="ghostButtonSort dateLabel flrt">Date Received
 <span ng-show="orderByField == 'dateAdded'"><span ng-show="!reverseSort" ng-init="reverseSort = true">^</span>
 <span ng-show="reverseSort">v</span></span></a>

Answer 3

<td>
    <a href="#" ng-click="sortType = 'firstName'; sortReverse = !sortReverse">
        firstName :
        <span ng-show="sortType == 'firstName' && !sortReverse" class="fa fa-caret-down"></span>
        <span ng-show="sortType == 'firstName' && sortReverse" class="fa fa-caret-up"></span>
    </a>
</td>