AngularJS CRUD Grid v7: Now with Lookup Tables, AngularJS 1.2 RC3 and a nicer UI

I just committed a big change to the AngularJS CRUD Grid – Lookup Tables!


Here’s what’s included:

  • Lookup tables: You can now specify that a column is a lookup column. The directive will retrieve the data for that lookup table and manage it states
  • AngularJS 1.2 RC3, Font Awesome
  • Refactored the way I’m hiding and showing UI elements with ng-switch
  • Added form-control class to form elements and modified the layout to use container and rows.
  • Added a clear button to the filter control
  • Clicking on a row’s text puts that row into edit mode. That way you don’t have to move mouse all the way over to the left to edit a row. Just click on any of the row’s text fields.

The most interesting thing about this release is the use of $broadcast and $on to push events from one directive to another. That way when I update data in the Place table that is immediately reflected in the Person table’s Place dropdown.

I get a reference to the document scope:

var $docScope = angular.element(document).scope();

Then issue a broadcast call after data has been updated. I pass $broadcast the table name so that my other directives don’t refresh all lookup tables.

var successCallback = function (e, cb) {
    $docScope.$broadcast('lookupDataCh ange', [$attrs.table]);

I then listen for the ‘lookupDataChange’ event and refresh the lookup data:

$scope.$on('lookupDataChange', function (scope,  table) {

You define the lookup attributes for the column in the directive element:

    table:'name of the table you want to pull data from',
    key: 'the column that you want to use as your select key',
    value: 'the column that you want to use as the select display text',
        field: 'the field to sort by',
        asc: 'true|false - the direction to sort by'

See Index.html for a working example.

I’m happy with the way this turned out. I hope you are too.