Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 8b3bec7

Browse files
zainengineerNarretz
zainengineer
authored and
Narretz
committed
docs(orderBy): make examples consistent
Updated example which manually injects the filter. It matches sibling example in functionality. Also put html, js and css into separate files. Also change anchors to buttons. Closes #13402
1 parent 6752337 commit 8b3bec7

File tree

1 file changed

+87
-67
lines changed

1 file changed

+87
-67
lines changed

‎src/ng/filter/orderBy.js

+87-67
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,6 @@
4242
* `reverse` is not set, which means it defaults to `false`.
4343
<example module="orderByExample">
4444
<file name="index.html">
45-
<script>
46-
angular.module('orderByExample', [])
47-
.controller('ExampleController', ['$scope', function($scope) {
48-
$scope.friends =
49-
[{name:'John', phone:'555-1212', age:10},
50-
{name:'Mary', phone:'555-9876', age:19},
51-
{name:'Mike', phone:'555-4321', age:21},
52-
{name:'Adam', phone:'555-5678', age:35},
53-
{name:'Julie', phone:'555-8765', age:29}];
54-
}]);
55-
</script>
5645
<div ng-controller="ExampleController">
5746
<table class="friend">
5847
<tr>
@@ -68,56 +57,42 @@
6857
</table>
6958
</div>
7059
</file>
60+
<file name="script.js">
61+
angular.module('orderByExample', [])
62+
.controller('ExampleController', ['$scope', function($scope) {
63+
$scope.friends =
64+
[{name:'John', phone:'555-1212', age:10},
65+
{name:'Mary', phone:'555-9876', age:19},
66+
{name:'Mike', phone:'555-4321', age:21},
67+
{name:'Adam', phone:'555-5678', age:35},
68+
{name:'Julie', phone:'555-8765', age:29}];
69+
}]);
70+
</file>
7171
</example>
7272
*
7373
* The predicate and reverse parameters can be controlled dynamically through scope properties,
7474
* as shown in the next example.
7575
* @example
7676
<example module="orderByExample">
7777
<file name="index.html">
78-
<script>
79-
angular.module('orderByExample', [])
80-
.controller('ExampleController', ['$scope', function($scope) {
81-
$scope.friends =
82-
[{name:'John', phone:'555-1212', age:10},
83-
{name:'Mary', phone:'555-9876', age:19},
84-
{name:'Mike', phone:'555-4321', age:21},
85-
{name:'Adam', phone:'555-5678', age:35},
86-
{name:'Julie', phone:'555-8765', age:29}];
87-
$scope.predicate = 'age';
88-
$scope.reverse = true;
89-
$scope.order = function(predicate) {
90-
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
91-
$scope.predicate = predicate;
92-
};
93-
}]);
94-
</script>
95-
<style type="text/css">
96-
.sortorder:after {
97-
content: '\25b2';
98-
}
99-
.sortorder.reverse:after {
100-
content: '\25bc';
101-
}
102-
</style>
10378
<div ng-controller="ExampleController">
10479
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
10580
<hr/>
106-
[ <a href="" ng-click="predicate=''">unsorted</a> ]
81+
<button ng-click="predicate=''">Set to unsorted</button>
10782
<table class="friend">
10883
<tr>
109-
<th>
110-
<a href="" ng-click="order('name')">Name</a>
111-
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
112-
</th>
113-
<th>
114-
<a href="" ng-click="order('phone')">Phone Number</a>
115-
<span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
116-
</th>
117-
<th>
118-
<a href="" ng-click="order('age')">Age</a>
119-
<span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
120-
</th>
84+
<th>
85+
<button ng-click="order('name')">Name</button>
86+
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
87+
</th>
88+
<th>
89+
<button ng-click="order('phone')">Phone Number</button>
90+
<span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
91+
</th>
92+
<th>
93+
<button ng-click="order('age')">Age</button>
94+
<span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
95+
</th>
12196
</tr>
12297
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
12398
<td>{{friend.name}}</td>
@@ -127,6 +102,31 @@
127102
</table>
128103
</div>
129104
</file>
105+
<file name="script.js">
106+
angular.module('orderByExample', [])
107+
.controller('ExampleController', ['$scope', function($scope) {
108+
$scope.friends =
109+
[{name:'John', phone:'555-1212', age:10},
110+
{name:'Mary', phone:'555-9876', age:19},
111+
{name:'Mike', phone:'555-4321', age:21},
112+
{name:'Adam', phone:'555-5678', age:35},
113+
{name:'Julie', phone:'555-8765', age:29}];
114+
$scope.predicate = 'age';
115+
$scope.reverse = true;
116+
$scope.order = function(predicate) {
117+
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
118+
$scope.predicate = predicate;
119+
};
120+
}]);
121+
</file>
122+
<file name="style.css">
123+
.sortorder:after {
124+
content: '\25b2';
125+
}
126+
.sortorder.reverse:after {
127+
content: '\25bc';
128+
}
129+
</file>
130130
</example>
131131
*
132132
* It's also possible to call the orderBy filter manually, by injecting `$filter`, retrieving the
@@ -138,21 +138,30 @@
138138
* @example
139139
<example module="orderByExample">
140140
<file name="index.html">
141-
<div ng-controller="ExampleController">
142-
<table class="friend">
143-
<tr>
144-
<th><a href="" ng-click="reverse=false;order('name', false)">Name</a>
145-
(<a href="" ng-click="order('-name',false)">^</a>)</th>
146-
<th><a href="" ng-click="reverse=!reverse;order('phone', reverse)">Phone Number</a></th>
147-
<th><a href="" ng-click="reverse=!reverse;order('age',reverse)">Age</a></th>
148-
</tr>
149-
<tr ng-repeat="friend in friends">
150-
<td>{{friend.name}}</td>
151-
<td>{{friend.phone}}</td>
152-
<td>{{friend.age}}</td>
153-
</tr>
154-
</table>
155-
</div>
141+
<div ng-controller="ExampleController">
142+
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
143+
<table class="friend">
144+
<tr>
145+
<th>
146+
<button ng-click="order('name')">Name</button>
147+
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
148+
</th>
149+
<th>
150+
<button ng-click="order('phone')">Phone Number</button>
151+
<span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
152+
</th>
153+
<th>
154+
<button ng-click="order('age')">Age</button>
155+
<span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
156+
</th>
157+
</tr>
158+
<tr ng-repeat="friend in friends">
159+
<td>{{friend.name}}</td>
160+
<td>{{friend.phone}}</td>
161+
<td>{{friend.age}}</td>
162+
</tr>
163+
</table>
164+
</div>
156165
</file>
157166
158167
<file name="script.js">
@@ -166,12 +175,23 @@
166175
{ name: 'Adam', phone: '555-5678', age: 35 },
167176
{ name: 'Julie', phone: '555-8765', age: 29 }
168177
];
169-
$scope.order = function(predicate, reverse) {
170-
$scope.friends = orderBy($scope.friends, predicate, reverse);
178+
$scope.order = function(predicate) {
179+
$scope.predicate = predicate;
180+
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
181+
$scope.friends = orderBy($scope.friends, predicate, $scope.reverse);
171182
};
172-
$scope.order('-age',false);
183+
$scope.order('age', true);
173184
}]);
174185
</file>
186+
187+
<file name="style.css">
188+
.sortorder:after {
189+
content: '\25b2';
190+
}
191+
.sortorder.reverse:after {
192+
content: '\25bc';
193+
}
194+
</file>
175195
</example>
176196
*/
177197
orderByFilter.$inject = ['$parse'];

0 commit comments

Comments
 (0)