Home / Web Development Technologies / AngularJS / AngularJS Lists Tables and Other Repeated Elements

AngularJS Lists Tables and Other Repeated Elements

AngularJS Lists Tables and Other Repeated Elements

AngularJS Lists Tables and Other Repeated Elements

Potentially the most valuable Angular directive, ng-repeat makes a duplicate of an arrangement of components
once for each thing in a collection. You ought to utilize it all around you need to make lists of things.
Suppose we’re composing an understudy list application for instructors. We’d likely get the understudy
information from a server, yet for this sample we should simply characterize it as a model in JavaScript:

var students = [{name:’Mary Contrary’, id:’1′},
{name:’Jack Sprat’, id:’2′},
{name:’Jill Hill’, id:’3′}];
function StudentListController($scope) {
$scope.students = students;
}
To display this list of students, we can do something like the following:
<ul ng-controller=”>
   <li ng-repeat=’student in students’>
       <a href=’/student/view/{{student.id}}’>{{student.name}}</a>
   </li>
</ul>

The ng-repeat will make a copy of all of the HTML inside the tag, including the tag it’s
placed on. With this, we would see:
• Mary Contrary
• Jack Sprat
• Jill Hill
…linking to /student/view/1, /student/view/2, and /student/view/3, respectively.
As we’ve seen before, changing the student’s array will automatically change the ren‐
dered list. If we were to do something like inserting a new student into the list:

var students = [{name:’Mary Contrary’, id:’1′},
{name:’Jack Sprat’, id:’2′},
{name:’Jill Hill’, id:’3′}];
function StudentListController($scope) {
$scope.students = students;
$scope.insertTom = function () {
$scope.students.splice(1, 0, {name:’Tom Thumb’, id:’4′});
};
}
and adding a button to invoke it in the template:

<ul ng-controller=”>
<li ng-repeat=’student in students’>
<a href=’/student/view/{{student.id}}’>{{student.name}}</a>
</li>
</ul>
<button ng-click=”insertTom()”>Insert</button>

we now see:
• Mary Contrary
• Tom Thumb
• Jack Sprat
• Jill Hill
The ng-repeat directive also gives you references to the index of the current element
via $index, and booleans that tell you if you’re on the first element, somewhere in the
middle, or the last element of the collection with $first, $middle, and $last.
You might imagine using the $index to label rows in a table. Given a template like this:

<table ng-controller=’AlbumController’>
<tr ng-repeat=’track in album’>
<td>{{$index + 1}}</td>
<td>{{track.name}}</td>
<td>{{track.duration}}</td>
</tr>
</table>

and this controller:

var album = [{name:’Southwest Serenade’, duration: ‘2:34′},
{name:’Northern Light Waltz’, duration: ‘3:21′},
{name:’Eastern Tango’, duration: ’17:45′}];
function AlbumController($scope) {
$scope.album = album;
}

We get the following:
1 Southwest Serenade 2:34
2 Northern Light Waltz 3:21
3 Eastern Tango 17:45

Related Topics :

What is AngularJs

Angular-JS Dependency Injection

Promises In An Angular-Js

Angular-JS Templates and Data Binding

AngularJS Lists Tables and Other Repeated Elements Potentially the most valuable Angular directive, ng-repeat makes a duplicate of an arrangement of components once for each thing in a collection. You ought to utilize it all around you need to make lists of things. Suppose we're composing an understudy list application for instructors. We'd likely get the understudy information from a server, yet for this sample we should simply characterize it as a model in JavaScript: To display this list of students, we can do something like the following: The ng-repeat will make a copy of all of the HTML inside…

0%

User Rating: 4.15 ( 1 votes)

Check Also

AngularJS and Laravel Blade

How to use AngularJS and Laravel Blade together

How to use AngularJS and Laravel Blade together In this article I will show you …

Ajax Pagination Using Laravel

How to Create an Ajax Pagination Using Laravel

In this article I will demonstrate one way to create an Ajax pagionation using Laravel …

Leave a Reply

Your email address will not be published. Required fields are marked *