Wie zu verhindern, Daten von DataTable mit Angular zerstören

Question

Ich versuche, DataTables mit Angular zu implementieren, ich bin googled und einige viele Lösungen erstellen Anweisungen, es ist in Ordnung, aber ist sehr alt nur "normale" Art und Weise zeichnen eine DataTable, die Problem ist Sortieren oder Tippen in Suchfeld meine Daten sind verloren !! ZB:

Und mein Code:

Ansicht

var myApp = angular.module('myApp', ['ngRoute','ui.utils']); 
 

 
myApp.controller("CompanyController", function ($scope, $window, CompanyService) { 
 

 
    $scope.Companies = []; 
 
    $scope.Company = {}; 
 

 
    $scope.dataTableOpt = { 
 
     //custom datatable options 
 
     "aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, 'All']], 
 
    }; 
 
    $scope.$watch("data", function (value) { 
 
     console.log("Data changed, refresh table:"); 
 
     var val = value || null; 
 
     if (val) { 
 

 
     } 
 
    }); 
 

 
    $scope.InitializeIndexView = function() { 
 
       
 
     var getAllProcess = CompanyService.GetAllCompanies(); 
 

 
     getAllProcess.then(function (response) { 
 
      //console.log(response.data) 
 
      
 
      $scope.Companies = response.data; 
 
      
 
     }, 
 
     function (response) { 
 
      console.log(response); 
 
     }) 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<table id="company-table" class="table table-striped table-bordered" ui-jq="DataTable" ui-options="dataTableOpt"> 
 
      <thead> 
 
       <tr> 
 
        <th>Id</th> 
 
        <th>Register time</th> 
 
        <th>Short Name</th> 
 
        <th>Long Name</th> 
 
        <th>Status</th> 
 
        <th>Owner Client</th> 
 
        <th></th> 
 
       </tr> 
 
      </thead> 
 
      
 
      <tbody> 
 
       <tr ng-repeat="item in Companies"> 
 
        <td>{{item._id}}</td> 
 
        <td>{{item.RegisterTime}}</td> 
 
        <td>{{item.LongName}}</td> 
 
        <td>{{item.ShortName}}</td> 
 
        <td>{{item.CompanyStatus}}</td> 
 
        <td>{{item.OwnerClient}}</td> 
 
        <td><a href="@Url.Action("Edit","Company")&CompanyId={{item._id}}">Edit</a> | <a href="@Url.Action("Delete","Company")&CompanyId={{item._id}}">Delete</a></td> 
 
       </tr> 
 
       
 
      </tbody> 
 
     </table>

Edit 1: ich diese Schnipsel folgen und funktioniert gut, da die Daten statisch : http://codepen.io/kalaiselvan/pen/RRBzda

Answer 1

Angular Js

var app = angular.module('myApp', ['datatables']); 
app.controller("myCtrl", function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) { 

$scope.isDisabledupdate = true; 

$scope.GetAllData = function() { 
    $http({ 
     method: "get", 
     url: "http://localhost:8200/Employee/Get_AllEmployee" 
    }).then(function (response) { 
     $scope.employees = response.data; 
    }, function() { 
     alert("Error Occur"); 
    }) 
}; 
$scope.vm = {}; 
$scope.vm.dtOptions = DTOptionsBuilder.newOptions() 
    .withOption('order', [0, 'asc']); 

Ansicht Seite

<div class="panel-body" ng-init="GetAllData()"> 
      <div class="table-responsive"> 
       <table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtOptions"> 
        <thead> 
         <tr> 
          <th>S.no</th> 
          <th> 
           ID 
          </th> 
          <th> 
           City Name 
          </th> 
          <th> 
           Actions 
          </th> 

         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="Emp in employees"> 
          <td>{{$index+1}}</td> 
          <td> 
           {{Emp.CId}} 
          </td> 
          <td> 
           {{Emp.CityName}} 
          </td> 
          <td> 
           <button type="button" class="btn btn-default btn" ng-click="getCustomer(Emp)"><i class="glyphicon glyphicon-pencil"></i></button> 
           <button type="button" class="btn btn-default btn" ng-click="deleteemp(Emp)"><i class="glyphicon glyphicon-trash"></i></button> 

          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 


<script src="~/Scripts/jquery-1.12.4.min.js"></script> 
<script src="~/Scripts/jquery-ui.js"></script> 
<script src="~/Scripts/angular.js"></script> 
<script src="~/Scripts/angular-datatables.min.js"></script> 
<script src="~/Scripts/jquery.dataTables.min.js"></script> 
<script src='https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js'></script> 

ich diesen Code hoffen, dass Sie helfen ....