如何使用 Angular 防止破坏 DataTable 中的数据

Question

我正在尝试使用 Angular 实现 DataTables，我在 google 上搜索过一些解决方案正在创建指令，它还可以，但非常古老，只有“正常”的方式来绘制 DataTable，问题是排序或在搜索框中输入数据丢失！！例如：

还有我的代码：

查看

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>

编辑 1： 我遵循这些 sn-p 并且工作正常，因为数据是静态的：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']);

查看页面

<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>

希望这段代码对你有所帮助....