Adding some AngularJS magic to your display templates – part 4

The last posts were about integrating AngularJS into display templates, and how you could optimize the code. Once you start using the templating from AngularJS it is quite easy to add extra functionality to the templates. In this post I give you a couple of additions to the template created in the previous posts.

Adding search functionality

One of the simplest things to add with AngularJS is a search box to filter out the results containing a specific keyword. For this you will need to do two things:

1. Add a text input;
2. Update the ngRepeat directive with your filter option.

The text input which needs to be added to the, looks like this:

1

<input type="text" ng-model="search.Line1" placeholder="Filter results" />

The ngRepeat directive needs to be updated with a filter property:

1

<li ng-show="ResultRows.length" ng-repeat="ResultRow in ResultRows ' filter:search:strict">

This results in the following output:

Show image

Show image

Note: I configured the search box to filter on the line 1 property with ng-model=“search.Line1”.

Alternating row classes

Alternating row classes are very easy to insert, this can be done with the ngClassEven or ngClassOdd directives. The code for this looks like this:

1
2
3
4
5

// Replace this line in the template
<div class="cbs-Item">

// With this line
<div class="cbs-Item" ng-class-even="'ms-alternatingstrong'">

The code will automatically add an alternating class to the even rows.

Show image

Grouping results

The last thing I prepared is how you can group results. First thing to do is put an order by filter in the ngRepeat directive.

1

<li ng-show="ResultRows.length" ng-repeat="ResultRow in ResultRows ' orderBy:'Line2'">

Note: I have set the order by for the “line 2” property, so if you want to test it, make sure that you specify a managed property for the “line 2” property.

Next is the heading you want to show for the group, this heading only needs to be shown the first time. To show the header the ngShow directive can be used. In the ngShow directive, we will a function to call to check when the a new group starts.

For this a function call is needed in the ngShow directive.

1
2
3

<h2 ng-show="CreateGroupHeader(ResultRow.Line2.value)">
  {{ ResultRow.Line2.value }}
</h2>

The function looks like this:

1
2
3
4
5
6
7

// Grouping function to check if the heading changed
$scope.currentGroupHeader = '';
$scope.CreateGroupHeader = function (value) {
  var showHeader = $scope.currentGroupHeader === value ? false : true;
  $scope.currentGroupHeader = value;
  return showHeader;
}

This needs to be added inside the controller code.

Show image

Of course there are a lot more possibilities with AngularJS and display templates, these were just some simple ones to show you the possibilities and to get you started.

Download

You can download these templates on the following location: AngularJS Templates - Part 4