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!

DEMO: http://angularjs-webapi-crud-grid.azurewebsites.net/

CODE: https://github.com/jonbgallant/AngularJS-WebApi-EF

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) {
notificationFactory.success();
$docScope.$broadcast('lookupDataCh ange', [$attrs.table]);
$scope.getData(cb);
};

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

$scope.$on('lookupDataChange', function (scope, table) {
$scope.resetLookupData(table[0]);
});

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

lookup
{
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',
orderBy
{
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.

Jon