Question

角度模块

[@Component({
    selector: 'ns-mycomponent',
    template:`
..              <div>{{ '2016/05/01'|fromNow }}</div>..

               `
})

Angular Controller将数据加载到数据表

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

CHTML

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');
        });
    }});

Jquery Call For Data Table

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>

通过角度ng-repeat加载数据工作正常。行也出现在jquery数据表中，但表的末尾始终显示表中没有数据，如果我单击排序按钮，所有ng-repeat行都会突然消失。但是当我使用类似$(function () { // $("#CategoryDetailsTable").DataTable(); $('#MeasureSettingsDetailsTable').DataTable({ "paging": true, "lengthChange": false, "searching": true, "ordering": true, "info": true, "autoWidth": false }); });静态数据表中的数据时，它可以正常工作

Answer 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');
});

别忘了更新排序功能。

使用Angular JS ng-repeat加载数据后，Jquery数据表函数不起作用

1 个答案: