Angular Js Tutorial Part 3

Published on : April 27, 2026

Author: wahid

Category: Web Development

In our last tutorial we develop a foundation for the app. Now we will discuss something simple. Today we will discuss about ngRepeat option and make a search with ngRepeat option.

ngRepeat
The ngRepeat is used to search a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item and $index is set to the item index or key.

To repeat a series of elements instead of just one parent element, ngRepeat supports extending the range of the repeater by defining start and end points by using ng-repeat-start and ng-repeat-end respectively. ng-repeat-start works as same ng-repeat. But we will repeat all the HTML code up to the end including the ending Html tag where ng-repeat-end is placed.

filter
we use filter to search from an array. filter selects a subset of item from array and returns it as a new array.

In my previous tutorial I show how to print an array from controller in your html page using ng-repeat. Today I just add filter to search an item from that array.

Let’s have a look in code.

app.js

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

maincontroller.js

[sourcecode]
app.controller("MainController", function($scope){
$scope.inputValue = ”;
$scope.players = [
{
name: ‘Neymer’,
country: ‘Brazil’
},
{
name: ‘Ronaldo’,
country: ‘Portugal’
},
{
name: ‘Messi’,
country: ‘Argentina’
},
{
name: ‘Roony’,
country: ‘England’
}
];
});
[/sourcecode]

index.html

[sourcecode]
<!–
==> Document Name: Tutorial Angular.js
–>
<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’ />
<ul>
<li ng-repeat=’player in players | filter:searchText’>
{{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]

Output:
This is simple output when you run your code first time.

and this is output when you type anything in the search field.

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