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