Ich füge DataTable eine neue Zeile hinzu, die von AngularJS nicht erfasst wird. Kann jemand zeigen, wie man diese beiden verbindet? Grundsätzlich muss sich diese neue Zeile wie die ursprüngliche Zeile verhalten, d. H. Die Funktion callGetRow ausführen. Jede Hilfe wird sehr geschätzt.

<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>
0
Leonid Alzhin 5 Jän. 2016 im 02:09

2 Antworten

Beste Antwort

Die Lösung finden Sie im folgenden Beispiel. Grundsätzlich musste ich mit DataTable Drop-Add-Zeilen hinzufügen und mit AngularJS Inhalte erstellen, kompilieren und mit JQuery dem Selektor in meinem HTML-Code hinzufügen.

Dinge, die getan werden mussten:

  • Entfernen Sie den DataTables-Code

  • Stellen Sie meine Funktionen in den Controller und fügen Sie die von mir benötigten Angular-Dienste ein (Bereich, Kompilieren, Element).

  • Verwenden Sie AngularJS, um Inhalte zu erstellen und zu kompilieren

  • Fügen Sie tbody einen Klassennamen hinzu, damit JQuery die neue Zeile anhängen kann

&

<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>
0
Leonid Alzhin 25 März 2016 im 18:39

Ich stimme nicht zu, aber wahrscheinlich müssen Sie ein $scope.$apply() nach $('#example').DataTable().row.add(["2.0", "Item 2", "Generic Desc", "2", 200]).draw(); setzen

0
ByteNudger 4 Jän. 2016 im 23:49