Datatable Angular Js Problem

Question

I’m trying to use the Managed datatable. In my controller I have the following function :

angular.module('MetronicApp').controller('OperatorsController', function ($rootScope, $scope, $http, $timeout, $stateParams, $window, $http) {
    $scope.$on('$viewContentLoaded', function () {
        // initialize core components
        App.initAjax();
    });
    $scope.operators = "";
    $scope.operators= new Array({id:1}, {id:2});
    
    console.log($scope.operators);
    $scope.url = "http://localhost/STAPI/"

    //alert($stateParams.id)
    //window.localStorage.setItem('id', 1)
    //console.log(window.localStorage.getItem('id'))
    //$scope.verifyToken();
    if(window.localStorage.getItem('token') == null) {
        console.log('redirect');
    }

    $scope.verifyToken = function (token) {
        data = null;
        $http({
            cache: false,
            method: 'POST',
            url: $scope.url +'user.php',
            data: { ref: 'check-session', token: token },
            dataType: 'json',
        }).success(function (data) { // retorna json montado
            var json = angular.fromJson(data)
            console.log(json[0].id);
        })
    }

    

    $scope.loadGeneralOperators = function () {
        data = null;
        $http({
            cache: false,
            method: 'POST',
            url: $scope.url + 'operators.php',
            data: { ref: 'list-my-operators', clientId: 1 },
            dataType: 'json',
        }).success(function (data) { // retorna json montado
            var json = angular.fromJson(data)
            //$scope.operators = json;
            console.log(json[0].id);
        })
    }
    


    //Functions autoload
    $scope.loadGeneralOperators();

    // set sidebar closed and body solid layout mode
    $rootScope.settings.layout.pageContentWhite = true;
    $rootScope.settings.layout.pageBodySolid = false;
    $rootScope.settings.layout.pageSidebarClosed = false;
});

My html is like this :

...

<tr class="odd gradeX" ng-repeat="n in operators">
                            <td>
                                <label class="mt-checkbox mt-checkbox-outline mt-checkbox-single">
                                    <input type="checkbox" class="checkboxes" value="1" />
                                    <span></span>
                                </label>
                            </td>
                            <td> {{n.id}} </td>
                            <td>
                                <a href="mailto:[email protected]"> [email protected] </a>
                            </td>
                            <td> 120 </td>
                            <td class="center"> 12 Jan 2012 </td>
                            <td>
                                <span class="label label-sm label-success"> Approved </span>
                            </td>
                        </tr>
                        
...
<script>
    TableDatatablesManaged.init();
</script>

However, when searching the datatable it does not recognize all values and turns {{n. id} How could I fix it? Thank you

Answer 1

You need to add

datatable="ng"

in its "table" tag for angular-datatables to understand ngRepeat iteration.