Currently, I am experimenting with AngularJS and NG-Table and facing a challenge that I cannot seem to resolve:
My issue involves displaying a collection of User objects from a Django application in an NG-Table. One of the attributes of the model is a boolean value that indicates whether the object is active or not. Instead of showing true or false, I would like to display a glyph from the Font Awesome set using an AngularJS directive.
After trying out various examples, I have come up with the following code snippets:
The module definition:
var main = angular.module("main", ["ngTable"]);
Loading the user objects for the table:
main.factory('User', function ($http) {
return {
async: function() {
var promise = $http.get('api/v1/users').then(function (response) {
return response.data["objects"];
});
// Return the promise to the controller
return promise;
}
};
});
The controller along with the directive responsible for converting the boolean value to the desired glyph:
main.controller("UsersCtrl", function ($scope, $filter, ngTableParams, User) {
User.async().then(function(data) {
$scope.tableParams = new ngTableParams({
page: 1,
count: 4,
sorting: {
name: 'asc'
}
},{
total: data.length,
getData: function ($defer, params) {
var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
}).directive('boolean', function () {
return {
restrict: 'E',
link: function (scope, elem, attrs) {
var userObject = scope.userObject;
if (userObject["active"]) {
console.log("active");
console.log(elem);
elem.html = "<i class='fa fa-check text-success fa-lg'></i>";
} else {
console.log("not active");
console.log(elem);
elem.html = "<i class='fa fa-times text-danger fa-lg'></i>";
}
}
}
});
In my HTML template:
<table ng-table="tableParams" class="table">
<tr ng-repeat="propertyObject in $data">
<td data-title="'Name'" sortable="'name'">
[[ userObject.name ]]
</td>
<td>
<boolean>[[ userObject.active ]]</boolean>
</td>
</tr>
</table>
However, due to conflicts with Django template syntax, I had to switch Angular's default double curly brackets to square brackets.
While the table displays correctly, the boolean directive does not render the correct glyph and still shows true/false. By logging to the console, I can see that the objects are correct. I must be overlooking something essential, so any guidance on what it might be would be greatly appreciated...