Tag Archives: data collection

PROBESEVEN - AngularJS – Handling Data Collection

I have been in development for handsome number of years and have found AngularJS to stand out especially for handling the data collections. I would stalwartly say that this is a platform for both the developers and designers.

The overview of AngularJS has concepts strong for the client-side technology which gives an extension for JavaScript and CSS. Well also for HTML 5.

I go by showing you some interesting stuffs which would ignite your curiosity to build and work with AngularJS.

AngularJS

Collection is nothing but it is just data model in angular. Renders the repeated data from data source and also formats the output of HTML elements with data filters too.

 Repeaters and Formatting filters are used to handle the data.

Repeaters

Ng-repeat directive use to iterate the data collections and create a DOM for each item in collections.if the item is updating, automatically the DOM object of item has update.

Highlights:
  • Each of the item in the array is the object with the property and for iteration the object gets assigned to the variable which creates a new element in its subtree.
  • It is possible to see the model that reflects in the DOM tree which is been generated by the ng-repeat directive.
  • Generates using special variables which allows the list items to populate by ng-repeat directive.
  • Possible to add or remove items from an array dynamically.

There are special variables that are use to handling the data collection even more flexible. These are associated only with repeaters.

  • $index: the zero-based index of the current item in the collection
  • $first: true if the current item is the first one in the collection, false otherwise
  • $middle: true if the current item is in the middle of the collection (after the first one, but before the last), false otherwise
  • $last: true if the current item is the last one in the collection, false otherwise
  • $even: true if the current $index is even, false otherwise
  • $odd: true if the current $index is odd, false otherwise
Sample code for Repeaters
<tbody>
<tr ng-repeat="d in filter_data"  ng-init=”rowlist=$index”> 
	<td>{{rowlist+1}}</td>  
	<td>{{d.firstName}}</td>                                      		
	<td>{{d.lastName}}</td>                                       		
	<td align="center">{{d.age}}</td> 
  <td class="" style="cursor:pointer;">
  <i class="fa fa-edit" ng-show="$even" title="Edit" ng-click="edit(d.student_id)"> Edit</i>
  <i class="fa fa-edit" ng-show="$odd" title="Edit" ng-click="edit(d.student_id)"> Delete</i>
  </td> 
</tr>
</tbody>
Output :

P7 POST

Formatting Filters

Format data or manipulate array collections through filters.To Include a filter in HTML document we can use the common notation {{exp}} and add Pipeline symbol after the expression to format its result.

The following are common and frequently used built in formatting filter

1. upperCase
2. lowerCase
3. date : “dd-mm-YYYY”
4. Currency
5. Reverse
6. isNumeric

We can add our custom filters too.

Sample code:
<tr ng-repeat="d in filtered = (listdata| filter:search | orderBy : predicate :reverse)
 | startFrom:(currentPage - 1) * entryLimit | limitTo:entryLimit">
      <td>{{rowlist+1}}</td> 
      <td>{{d.firstName | uppercase}}</td> 
      <td>{{d.lastName | lowercase}}</td> 
      <td align="center">{{d.age | isNumeric}}</td> 
    <td class="" style="cursor:pointer;">
    <i class="fa fa-edit" ng-show="$even" title="Edit" 
ng-click="edit(d.student_id)"> Edit</i>
    <i class="fa fa-edit" ng-show="$odd" title="Edit" 
ng-click="edit(d.student_id)"> Delete</i>
  </td> 
</tr>
Sample code for Custom filter starts From
app.filter('startFrom', function() {
                                    return function(input, start) {
                                    if(input && input.length>0) {
                                    start = +start; //parse to int
                                    return input.slice(start);
                                    }
                                    return [];
                                    }
});
Output:

P7 POST 2

Indeed, this short start would allow you to stick to the standpoint of the support extended by AngularJS. Hope you would have gained interest to try this, do share your comments.