0

I am working on a site employing ajgularjs that will display data returning from a web api call in an ng-grid display. Earlier problems with the data not displaying after the $http.get were remedied through a service call such as:

    services.factory('Filing', ['$resource',
       function($resource) {
            return $resource('/api/bills');
    }]);

I have a need on the ng-grid to concatenate the values of three data columns to display in a single ng-grid column, and this is not working.

On Google's angular site I found a similar question to call a function to resolve the concatenation, so in trying this I came up with the following in my controller .js file:

        $scope.billData= Filing.query();    // from services.js


        $scope.gridData = $scope.billData;

        $scope.gridDefs = [
            { field: 'billNumberColumnDisplay()', displayName: 'Bill' },
            { field: 'AuthorLastName', displayName: 'Author'},
            { field: 'Status', displayName: 'Status'},
            { field: 'Committee', displayName: 'Committee'}
        ];

        $scope.gridOptions = {
            data: 'gridData',
            columnDefs: 'gridDefs',
            enableColumnResize: true,
            multiSelect: false
        };

        //function to concatenate the bill number fields
        angular.forEach($scope.gridData, function(row) {
            row.billNumberColumnDisplay = function() {
                return this.BillId.Chamber + this.BillId.Type.trim() + ' ' + this.BillId.Suffix.replace(/^0+(?!\.|$)/, '');
        };
    });

The second, third, and fourth columns display just fine, so it's not that the data isn't being returned to the grid. If I just display a single column from my return /api call it also displays in the first column.

So, is there anyone out there who can point me in the right direction here? I wouldn't think concatenating fields would pose such a difficult task, but I am obviously doing something wrong.

Thank you in advance for any assistance,

Dan

djmarquette
  • 712
  • 8
  • 17
  • I think you need to put a jsfiddle. just by looking can't see anything wrong. – wayne Mar 09 '14 at 15:25
  • Yeah, I can look into that with the problem being that I'd need to mock up the data since its coming from an internal webapi call. My situation is extremely similar to this http://plnkr.co/edit/HeyAdn?p=preview with the exception being that I am using a service to return the dataset. In fact, when I place the plunker example in my code it works fine. So not sure if my problem is the grid column rendering prior to the promise returning the data? And if so, what can I do about it? – djmarquette Mar 09 '14 at 18:07
  • 1
    the promise has not been resolve, you need to put your code inside .then function. – wayne Mar 10 '14 at 01:15
  • wayne - which code are you referring to put inside a .then function? The assignment to $scope.billData ? And how does this explain one column being returned to my grid and not the first column (from foreach call)? – djmarquette Mar 10 '14 at 12:08
  • what version of angular are you using? before 1.2, angular handle promises in template binding, but after 1.2.0-rc3 you can't. read: http://stackoverflow.com/questions/19472017/angularjs-promise-not-binding-to-template-in-1-2, before 1.2.0-rc3 behaviour read section Using promises directly in the view: http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ – wayne Mar 10 '14 at 12:22
  • Wayne - I am using the latest 1.2.14 version of angularJS. – djmarquette Mar 10 '14 at 12:36
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49402/discussion-between-djmarquette-and-wayne) – djmarquette Mar 10 '14 at 12:46

0 Answers0