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!

CODE: https://github.com/jongio/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