使用angularjs和codeigniter在表行中显示JSON内容

时间:2016-12-20 06:49:26

标签: javascript php angularjs json codeigniter

我只是尝试从服务器获取内容并使用Angularjs将其显示在表中。我已经尝试了一段时间,但还没有得到任何解决方案。顺便说一下,我正在研究CodeIgniter框架。

这是我的CodeIgniter控制器;

public function list_agents() {
    if($this->is_logged_in ()) {
        $agents = $this->generic_model->general_fetch('agent_master');
        echo json_encode($agents);
    }
    else {
        redirect(base_url());
    }
}

在上面的代码中,而不是echo我使用print,print_r也是..但是它仍然没有用。

这是我的js文件功能;

(function () {
var addApp = angular.module('agentApp', ['ngRoute']);
addApp.controller('agentAddController', function ($scope, $http, growl) {
$scope.receivedData = [];
    $http({
        method : 'POST',
        url : 'agent/list_agents',
        headers : {
            "Content-Type" : "application/json"
        }
    }).then(function (data) {
        $scope.receivedData = JSON.parse(data);
    });
});
})();

在上面这段代码中我使用了JSON.parse和没有JSON.parse函数。没有得到正确的结果。

这是我的观点;

<section class="content" ng-app="agentApp" ng-controller="agentAddController">
<div class="row">
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Manage Agents</h3>
            </div>
            <div class="box-body">

                <table class="table table-striped table-bordered" id="agents_table">
                    <thead>
                        <tr>
                            <th>Sl No.</th>
                            <th>Agent Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <div ng-repeat="data in receivedData">
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ data.agent_name }}</td>
                                <td><button class="btn btn-warning btn-xs"><i class="fa fa-trash" aria-hidden="true"></i></button></td>
                            </tr>
                        </div>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Sl No.</th>
                            <th>Agent Name</th>
                            <th>Actions</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
</section>

我知道如果我把ng-repeat放在tr标签中我会得到完美的结果,但我不想这样做,因为我正在和adminLTE合作。因此在adminLTE中有一个函数DataTable(),它将搜索和分页应用于表。如果我将ng-repeat赋予tr,则无法添加这些功能。

1 个答案:

答案 0 :(得分:0)

尝试:$scope.receivedData = JSON.parse(data.data);

响应对象不仅是数据本身,这就是5行的原因。它回馈了data, headers, status, etc...

https://docs.angularjs.org/api/ng/service/ $ HTTP