Skip to content

Commit 158f1ae

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 angular#13402
1 parent f53a7f6 commit 158f1ae

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

0 commit comments

Comments
 (0)