Angular Js Tutorial Part 4

Published on : April 27, 2026

Author: wahid

Category: Uncategorized

In my last part of tutorial i added a search field to search the content. Today i am going to add an option to order the content. For ordering i use orderProp option. I sort my element using alphabetically or newest content.

To order with newest content you need to add value of each property at controller. Here in my example: I add a field named order at maincontroller.js file to indicate the newest content.

Now focus on maincontroller.js and you can easily differentiate this file with previous maincontroller.js file. At maincontroller.js file you can see order field.

maincontroller.js

[sourcecode]
app.controller("MainController", function($scope){
$scope.inputValue = ”;

$scope.players = [
{
name: ‘Neymer’,
country: ‘Brazil’,
‘order’: 1
},
{
name: ‘Ronaldo’,
country: ‘Portugal’,
‘order’: 2
},
{
name: ‘Messi’,
country: ‘Argentina’,
‘order’: 3
},
{
name: ‘Roony’,
country: ‘England’,
‘order’: 4
}
];
});
[/sourcecode]

app.js file is same like as previous app.js

[sourcecode]
var app = angular.module(‘MyTutorialApp’,[]);
[/sourcecode]

I add a select box in index.html file. There are two option to sort your content. One is alphabetically and the other is newer content. Here is my new index.html file

[sourcecode]
<html>
<head>
<title>Angular example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js"></script>
<script src="maincontroller.js"></script>
</head>

<body>
<div id=’content’ ng-app=’MyTutorialApp’ ng-controller=’MainController’>
Search: <input type=’text’ ng-model=’searchText’ />
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="order">Newest</option>
</select>
<ul>
<li ng-repeat=’player in players | filter:searchText | orderBy:orderProp’>
{{player.name}}
<p style="color:blue;">{{player.country}}</p>
</li>
</ul>
<p style="color:green;">Total number of players: <span style="color:red;">{{players.length}}</span></p>
</div>
</body>
</html>
[/sourcecode]

Now when you run the code initially your output is :

When you select option sort by alphabetical your output:

If you select option sort by newest you can see this output:

I will discuss more things about angular.js in my next tutorial.