Jquery AngularJS与数据表集成_Jquery_Angularjs_Datatables

Jquery AngularJS与数据表集成

jquery angularjs datatables

Jquery AngularJS与数据表集成,jquery,angularjs,datatables,Jquery,Angularjs,Datatables,我正在向DataTable添加一个新行，AngularJS并没有接收到它。有人能示范一下如何把这两个联系起来吗？基本上，我需要新行的行为与原始行类似，即执行callGetRow函数。非常感谢您的帮助 <html ng-app> <head> <title>Example</title> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></scri

我正在向DataTable添加一个新行，AngularJS并没有接收到它。有人能示范一下如何把这两个联系起来吗？基本上，我需要新行的行为与原始行类似，即执行callGetRow函数。非常感谢您的帮助

<html ng-app>
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script>
function RESTCall($scope, $http) {  
    $scope.callGetRow = function(line) {
        alert(line);
    };

    $scope.callAddNew = function() {
        $('#example').DataTable().row.add(["2.0","Item 2", "Generic Desc", "2", 200]).draw();
    };      
}

</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example" cellspacing="0" >
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>


例子
函数RESTCall（$scope，$http）{
$scope.callGetRow=函数（行）{
警戒线；
};
$scope.callAddNew=函数（）{
$（'#示例'）.DataTable（）.row.add（[“2.0”，“第2项”，“通用描述”，“2”，200]）.draw（）；
};      
}
项目
描述
数量
名单$
1
项目1
一般描述
3.
100
新增

我不同意，但您可能需要在

$（'#示例'）.DataTable（）行之后添加一个$scope.$apply（）
解决方案如下例所示。基本上，我必须使用DataTable添加drop-adding行，使用AngularJS创建内容，编译内容，并使用JQuery将其添加到HTML中的选择器中
需要做的事情：

删除数据表代码
将我的函数放在控制器中，并注入我需要的服务（范围、编译、元素）
使用AngularJS创建内容并进行编译
将类名添加到tbody以便JQuery将新行附加到

&

例子
var myApp=angular.module（“problemApp”，[]）；
控制器（“RESTCall”、函数（$scope、$compile、$element）{
$scope.callGetRow=函数（行）{
警戒线；
};
$scope.callAddNew=函数（）{
//定义元素
$scope.content=“2.0项目2一般说明21200”；
//用jqLite包起来
var tblElem=angular.element（$scope.content）；
//创建一个函数来生成内容
var compileFn=$compile（tbleleem）；
//执行编译函数
compileFn（$范围）；
//添加到DOM
$（“.toappend”）.append（tbleem）；
};      
});
$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
} );
项目
描述
数量
名单$
1
项目1
一般描述
3.
100
新增
angular有一个datatables插件，可能会对您有所帮助：感谢您的尝试，但它不起作用：错误：$apply已在进行中
<html ng-app="problemApp">
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />

<script>

    var myApp = angular.module("problemApp", []);

    myApp.controller("RESTCall", function ($scope, $compile, $element) {

        $scope.callGetRow = function(line) {
            alert(line);
        };

        $scope.callAddNew = function() {

            //define the element 
            $scope.content = "<tr ng-click=\"callGetRow('2/0')\" id=\"2.0\"><td>2.0</td><td>Item 2</td><td>Generic Description 2</td><td>1</td><td>200</td></tr>";

            //wrap it in jqLite
            var tblElem = angular.element($scope.content);

            //create a function to generate content
            var compileFn = $compile(tblElem);

            //execute the compilation function
            compileFn($scope);

            // add to DOM
            $( ".toappend" ).append(tblElem);
        };      

    });

    $(document).ready( function() {
      $('#example').dataTable();
    } );

</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example">
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody class="toappend">
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>