Compass In Hand

Special Note: Congratulations to the AngularJS team on their 1.2.0 release! New features, better security, more stability. Read more about it on the AngularJS blog.

Before we continue I would like to quickly mention how important a good sandbox is for the rapid building and breaking of educational code. In an upcoming post I plan to cover how I configure my sandbox. For now I recommend attaching the excellent CSS framework Bootstrap to your project index.html files to take advantage of pre-constructed classes that will make your rendered markup – tables in particular – easier to read.

Preparing the Table, View Phase

Note these are View snippets – in order for these Bootstrap classes to work you must initialize the parent containers with their own Bootstrap classes. Again, more on this in a future post.

<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">
        <table class="table table-striped table-bordered">
            <tr ng-repeat="actor in avengers.cast">
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>
    </div>
</div>

Did you notice?

ng-repeat="actor in avengers.cast"

The ng-repeat directive is an example of angular magic; a small directive that drives iterations through data sets without needing extensive pre-configuration. Sweet!

Preparing the Table, Controller and Service Phase

// Initialize App
var myApp = angular.module('myApp', []);

// Create the Service
myApp.factory('Avengers', function() {
    var Avengers = {};
    Avengers.cast = [
        {
            name: "Robert Downey Jr.",
            character: "Tony Stark / Iron Man"
        }
        // rest of the cast added here, more entries = bigger table
    ];
    return Avengers;
});

// Define the Controller
function AvengersCtrl($scope, Avengers) {
    $scope.avengers = Avengers;
}

Adding Search

Adding a Search filter, for the entire table or for a single column, only requires a small change to the View.

<input type="text" class="form-control" ng-model="search.$">

Using the dollar sign “$” refers to all available fields and is perfect for a table-wide search:

ng-model="search.$"

Replace the dollar sign “$” with “name” to limit searching to the name field:

ng-model="search.name"

Finally, enable search by adding the following:

<tr ng-repeat="actor in avengers.cast | filter:search">

In addition to outputting markup, each ng-repeat loop iteration can also be piped through a filter, as I’ve done in this example. Pattern matching is just one example; many other filters are available for even more advanced output manipulation. Refer to the AngularJS docs for more information on this awesome feature!

Shout Out

Huge credit for my continuing AngularJS education goes directly to egghead.io. Their awesome video library and associated sample code, most of which is FREE, is an incredible addition to the community. Thanks in particular to John Lindquist for explaining these concepts so clearly.

Thanks for reading.