Wednesday, February 11, 2015

Using ng-repeat to process an array of objects

In the previous post ng-repeat directive we saw on how to use the ng-repeat directive to display items in a 1-dimentional array, however in real time we will have to deal with complex collections, a typical example could be to display a table/list which has multiple columns, in this case each row will have multiple properties, ng-repeat directive can handle these by parsing an array of objects.

The following example shows on how to process an array, where each element in the array is an object having its own set of properties.

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-init="Employees=[
{id:1,Name:'Tom'},
{id:2,Name:'Harry'},
{id:3,Name:'Peter'}]">
<ul>
   <li ng-repeat="emp in Employees">
     {{ emp.id }} - {{ emp.Name }}<br/>
   </li>
  </ul>
</div>
</body>

</html>

Output:




Search Flipkart Products:
Flipkart.com

No comments: