使用Angular JS ng-repeat加载数据后Jquery Datatable函数不起作用答案

【问题标题】：Jquery Datatable Functions Not Working After Data Loading Using Angular JS ng-repeat使用Angular JS ng-repeat加载数据后Jquery Datatable函数不起作用
【发布时间】：2016-10-11 03:41:35
【问题描述】：

角度模块

var MeasureSettingsApp = angular.module("MeasureSettingsApp", [])

Angular 控制器将数据加载到数据表

MeasureSettingsApp.controller("measureSettingsCtrl", function ($scope, measureSettingsService) {$scope.GetAllMeasureSettingsDetails = function () {
         var getMeasureSettingsdata = measureSettingsService.getAllMeasureSettingsDetails();
        getMeasureSettingsdata.then(function (measuresettings) {
            $scope.MeasureSettingsModels = measuresettings.data;

        }, function () {
            alert('Error Occured While Getting Records');
        });
    }});

CHTML

able id="MeasureSettingsDetailsTable" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Setting Id</th>
                                    <th>Basic Measure</th>
                                    <th></th>
                                    <th>Raw Material</th>
                                    <th>Measure</th>
                                    <th>Volume</th>
                                    <th>Edit</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-ng-repeat="measureSettings in MeasureSettingsModels">
                                    <td>{{measureSettings.MeasureSettingsId}}</td>
                                    <td>{{measureSettings.BasicMeasureName}}</td>
                                    <td> Per 01 </td>
                                    <td>{{measureSettings.RawMaterialName}}</td>
                                    <td>{{measureSettings.MeasureName}}</td>
                                    <td>{{measureSettings.Volume}}</td>
                                    <td><input type="checkbox" ng-model="measureSettings.IsActive" disabled="disabled" /></td>
                                    <td>
                                        <button class="btn btn-sm btn-info" ng-click="EditMeasureSettings(measureSettings)"><i class="fa fa-pencil"></i></button>
                                        <button class="btn btn-sm btn-danger" ng-click="DeleteMeasureSettings(measureSettings)"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Setting Id</th>
                                    <th>Basic Measure</th>
                                    <th></th>
                                    <th>Raw Material</th>
                                    <th>Measure</th>
                                    <th>Edit</th>
                                </tr>
                            </tfoot>
                        </table>

jquery 调用数据表

$(function () {
        // $("#CategoryDetailsTable").DataTable();
        $('#MeasureSettingsDetailsTable').DataTable({

            "paging": true,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false
        });
    });

通过角度 ng-repeat 加载数据可以正常工作。行也出现在 jquery 数据表中，但表的末尾总是显示 No Data Available In Table，如果我单击排序按钮，所有 ng-repeat 行都会突然消失。但是当我使用<tr> <td> some data </td> </tr> 静态数据表中的数据时，它工作得很好

【问题讨论】：

你不能用ng-repeat渲染一个dataTable，就这么简单。如果您愿意，您将需要使用角度数据表（jQuery 数据表的指令）或由数据表本身呈现。

标签： javascript jquery html angularjs

【解决方案1】：

问题在于排序功能。当您将数组设置为等于某个值时，您会破坏 Angular 引用并且它认为这是新对象...

当您使用角度数组时，您应该重置它的长度并推送新值。

var getMeasureSettingsdata = measureSettingsService.getAllMeasureSettingsDetails();
getMeasureSettingsdata.then(function (measuresettings) {
   $scope.MeasureSettingsModels.length = 0;
   $scope.MeasureSettingsModels.push(measuresettings.data);
}, function () {
   alert('Error Occured While Getting Records');
});

别忘了更新你的排序功能。

【讨论】：