Jquery的數據表功能不工作數據載入後使用角JS納克重複

角模塊Jquery的數據表功能不工作數據載入後使用角JS納克重複

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

角控制器要將數據加載到數據表

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調用數據T能夠

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

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

通過角度ng-repeat的數據加載工作正常。行也出現在jQuery數據表中，但表的末尾總是顯示無數據可用在表中，如果我點擊排序按鈕，所有的ng-repeat行突然消失。但是當我使用像<tr> <td> some data </td> </tr>靜態數據表中的數據它工作得很好

來源

2016-10-10 ThusharaHettigoda

你不能用'ng-repeat'渲染數據表，就這麼簡單。如果你想要，你將需要使用angular dataTables（指令用於jQuery數據表）或由dataTable本身渲染。 – davidkonrad

問題是在排序功能。當你設置的數組等於你打破角參考的東西，它認爲這是新的對象...

當你使用角度數組時，你應該重置它的長度並推送新的值。

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

不要忘記更新你的排序功能。

來源

2016-10-10 19:41:35 Alexandr

感謝您的幫助 – ThusharaHettigoda

Jquery的數據表功能不工作數據載入後使用角JS納克重複

回答

相關問題