angular.Array.orderBy.html

<h1>angular.Array.orderBy</h1>
<div class="angular-array-orderby"><h2>Description</h2>
<div class="description"><p>Orders <code>array</code> by the <code>expression</code> predicate.</p>

<p>Note: this function is used to augment the <code>Array</code> type in angular expressions. See
<a href="#!angular.Array"><code>angular.Array</code></a> for more info.</p></div>
<h2>Usage</h2>
<div class="usage"><div ng:non-bindable=""><pre class="brush: js; html-script: true;">angular.Array.orderBy(array, expression[, reverse]);</pre>
</div>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">array – {Array} – </code>
<p>The array to sort.</p></li>
<li><code ng:non-bindable="">expression – {function(*, *)|string|Array.&lt;(function(*, *)|string)&gt;} – </code>
<p>A predicate to be
used by the comparator to determine the order of elements.</p>

<p>Can be one of:</p>

<ul>
<li><code>function</code>: JavaScript's Array#sort comparator function</li>
<li><code>string</code>: angular expression which evaluates to an object to order by, such as 'name' to
sort by a property called 'name'. Optionally prefixed with <code>+</code> or <code>-</code> to control ascending
or descending sort order (e.g. +name or -name).</li>
<li><code>Array</code>: array of function or string predicates, such that a first predicate in the array
is used for sorting, but when the items are equivalent next predicate is used.</li>
</ul></li>
<li><code ng:non-bindable="">reverse<i>(optional)</i> – {boolean} – </code>
<p>Reverse the order the array.</p></li>
</ul>
<h3>Returns</h3>
<div class="returns"><code ng:non-bindable="">{Array}</code>
– <p>Sorted copy of the source array.</p></div>
</div>
<h2>Example</h2>
<div class="example"><doc:example>
<pre class="doc-source">
  &lt;div ng:init="friends = [{name:'John', phone:'555-1212', age:10},
                           {name:'Mary', phone:'555-9876', age:19},
                           {name:'Mike', phone:'555-4321', age:21},
                           {name:'Adam', phone:'555-5678', age:35},
                           {name:'Julie', phone:'555-8765', age:29}]"&gt;&lt;/div&gt;

  &lt;pre&gt;Sorting predicate = {{predicate}}&lt;/pre&gt;
  &lt;hr/&gt;
  &lt;table ng:init="predicate='-age'"&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;a href="" ng:click="predicate = 'name'"&gt;Name&lt;/a&gt;
          (&lt;a href ng:click="predicate = '-name'"&gt;^&lt;/a&gt;)&lt;/th&gt;
      &lt;th&gt;&lt;a href="" ng:click="predicate = 'phone'"&gt;Phone&lt;/a&gt;
          (&lt;a href ng:click="predicate = '-phone'"&gt;^&lt;/a&gt;)&lt;/th&gt;
      &lt;th&gt;&lt;a href="" ng:click="predicate = 'age'"&gt;Age&lt;/a&gt;
          (&lt;a href ng:click="predicate = '-age'"&gt;^&lt;/a&gt;)&lt;/th&gt;
    &lt;tr&gt;
    &lt;tr ng:repeat="friend in friends.$orderBy(predicate)"&gt;
      &lt;td&gt;{{friend.name}}&lt;/td&gt;
      &lt;td&gt;{{friend.phone}}&lt;/td&gt;
      &lt;td&gt;{{friend.age}}&lt;/td&gt;
    &lt;tr&gt;
  &lt;/table&gt;
</pre>
<pre class="doc-scenario">
  it('should be reverse ordered by aged', function() {
    expect(binding('predicate')).toBe('Sorting predicate = -age');
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.age')).
      toEqual(['35', '29', '21', '19', '10']);
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.name')).
      toEqual(['Adam', 'Julie', 'Mike', 'Mary', 'John']);
  });

  it('should reorder the table when user selects different predicate', function() {
    element('.doc-example-live a:contains("Name")').click();
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.name')).
      toEqual(['Adam', 'John', 'Julie', 'Mary', 'Mike']);
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.age')).
      toEqual(['35', '10', '29', '19', '21']);

    element('.doc-example-live a:contains("Phone")+a:contains("^")').click();
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.phone')).
      toEqual(['555-9876', '555-8765', '555-5678', '555-4321', '555-1212']);
    expect(repeater('.doc-example-live table', 'friend in friends').column('friend.name')).
      toEqual(['Mary', 'Julie', 'Adam', 'Mike', 'John']);
  });
</pre>
</doc:example></div>
</div>