Footable not rendering with angular scope

                <tbody>
                    <tr ng-repeat="item in result">
                        <td>{{item.BookingCode}} </td>
                        <td>{{item.Location}} </td>
                        <td>{{item.Client}} </td>
                        <td>{{item.MasterClient}} </td>
                        <td>{{item.PropertyName}}</td>
                        <td>{{item.Guest}} </td>
                        <td>{{item.ChkInDt}} </td>
                        <td>{{item.ChkOutDt}} </td>
                        <td>{{item.TarifforCommission}} </td>
                        <td>{{item.Discount}} </td>
                        <td>{{item.NoOfDays}} </td>
                        <td>{{item.TotalAmount}} </td>
                        <td>{{item.TariffMode}} </td>
                        <td>{{item.SalesExecutive}} </td>
                        <td>{{item.IsTac}} </td>
                    </tr>
                </tbody>
            </table>`

$('.table').footable();

$http ({ method: 'post', url: $rootScope.ServiceBaseUri + 'RevenueReport/CheckInRevenue', data: revreportdetails, headers: { 'Content-type': 'application/json',

                }
            }).success(function (data) {
                debugger;
                if (data) {

                    $scope.result = data;

                }

            }).error(function() {

            });

http://prntscr.com/d5g5f1

I am getting no results as above screenshot.My scope has the required data in array format any help would be appreciated.

iammelvin commented 7 years ago

But if i call api via ajax i am able to get the output

steveush commented 7 years ago

Hi,

Apologies, as I've said in the other Angular/React threads, I don't use these libraries and can't really help you resolve this issue. From everything I have seen they don't particular play well with standard jQuery plugins that heavily manipulate the DOM such as FooTable as their entire approach to DOM manipulation is completely different and quite often breaks once elements are detached/appended to the DOM via jQuery as it messes with the current state of the page and the scope doesn't know how to handle it.

I'll leave this up in the hopes someone else who uses Angular can help you out but I don't have the free time at the moment to look into it and it's a fairly low priority issue for myself.

Thanks

Booking Code	Location	Client	Master Client	Property Name	Guest	Check-In Date	Check-Out Date	Tariff/Commission	Discount	No Of Days	Total Amount	Tariff Mode	Sales Executive	IsTac

fooplugins / FooTable

Footable not rendering with angular scope #553