如何在此函数中使用webService。 $ resource,有angularjs?

时间:2017-02-20 03:25:03

标签: angularjs datatable angular-datatables

我有以下控制器,用于填充DataTable表。 但是我使用了json数组,我想使用一个返回json对象的web服务。 http://localhost:8080/system/public/ws/users。它返回一个nose对象数组,因为我在该函数中使用它来填充表格。

> .controller('dt_default',
    function($compile, $scope, $timeout, $resource, DTOptionsBuilder, DTColumnDefBuilder, $http) {
        var vm = this;
        vm.dt_data = [];
        vm.dtOptions = DTOptionsBuilder
            .newOptions()
            .withDisplayLength(10)
            .withOption('initComplete', function() {
                $timeout(function() {
                    $compile($('.dt-uikit .md-input'))($scope);
                })
            });
        vm.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(0),
            DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2),
            DTColumnDefBuilder.newColumnDef(3),
            DTColumnDefBuilder.newColumnDef(4),
            DTColumnDefBuilder.newColumnDef(5)
        ];
        $resource('data/dt_data.json') 
           /* Here I get the json.
            * How can I use the webservice that returns an array of objects. 
            * Json with has only arrays
            */
            .query()
            .$promise
            .then(function(dt_data) {
                vm.dt_data = dt_data;
                console.log(dt_data);
            });

这个html我就是这样的,就像我一样。

<tr ng-repeat="row in showCase.dt_data">
                        <td>{{row[0]}}</td>
                        <td>{{row[1]}}</td>
                        <td>{{row[2]}}</td>
                        <td>{{row[3]}}</td>
                        <td>{{row[4]}}</td>
                        <td> 
                         <a href="#" data-uk-modal="{target:'#modal_header_footer'}"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>
                         <a href="#" data-uk-modal="{target:'#modal_header_footer_eliminar'}"><i class="md-icon material-icons md-bg-red-900 uk-text-contrast">&#xE872;</i></a>
                         </td>
                    </tr>

1 个答案:

答案 0 :(得分:0)

使用此代码:

请看这个页面:Documentation

&#13;
&#13;
.controller('dt_default',
    function($compile, $scope, $timeout, $resource, DTOptionsBuilder, DTColumnDefBuilder, $http) {
        var vm = this;
        vm.dt_data = [];
        vm.dtOptions = DTOptionsBuilder
            .newOptions()
            .withDisplayLength(10)
            .withOption('initComplete', function() {
                $timeout(function() {
                    $compile($('.dt-uikit .md-input'))($scope);
                })
            })
            .withOption('ajax', {
                url: 'http://localhost:8080/system/public/ws/users',
                type: 'GET',
            })
            .withOption('processing', true)
            .withOption('serverSide', true);
           
        vm.dtColumns = [
          DTColumnBuilder.newColumn('id').withTitle('ID'),
          DTColumnBuilder.newColumn('firstName').withTitle('First name'),
          DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
            DTColumnBuilder.newColumn(null).withTitle('Option').renderWith(data, type, full) {
            var el = '<a href="#" data-uk-modal="{target:\'#modal_header_footer\'}"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>';
            })
      ];
&#13;
<div ng-controller="dt_default as dt_default">
    <table datatable="" dt-options="dt_default.dtOptions" dt-columns="dt_default.dtColumns" class="row-border hover"></table>
</div>
&#13;
&#13;
&#13;