Question

我有一个ngTable，当控制器使用ngResource查询API调用以获取响应数组时，我想要填充数据。

服务 （在两种情况下都使用相同）

angular.module('core.template.block').
        factory('TemplateBlockFactory', ['$resource', 
            function($resource) {
                return $resource('http://api/', {}, {

                });   
            }
        ]);

案例1 ：

angular.module('temp').component('tempB', {
    templateUrl: 'template/B/tempB.template.html',
    controller: ['TemplateBlockFactory', 'NgTableParams'], 
        function TemplateBCtrlr(TemplateBlockFactory, NgTableParams) {
            var self = this;
            var tableData = [];
            tableData = TemplateBlockFactory.query();
            self.tableParams = new NgTableParams({}, {dataset: tableData});
        }
})

案例2 ：

angular.module('temp').component('tempB', {
    templateUrl: 'template/B/tempB.template.html',
    controller: ['TemplateBlockFactory', 'NgTableParams'], 
        function TemplateBCtrlr(TemplateBlockFactory, NgTableParams) {
            var self = this;
            self.tableParams = new NgTableParams({}, {
                getData: function (params) {
                    return TemplateBlockFactory.query();
                }
            });
        }
})

模板

        <div class="box-body">
            <table ng-table="$ctrl.tableParams" class="table table-bordered table-striped" show-filter="true">
                <tr ng-repeat="block in $data">
                    <td data-title="'#'" filter="{ id: 'number'}" sortable="'id'">{{ $index+1 }}</td>
                    <td data-title="'Name'" filter="{ name: 'text'}" sortable="'name'">{{ block.name }}</td>
                    <td data-title="'Width'" filter="{ width: 'number'}" sortable="'width'">{{ block.width }}</td>
                    <td data-title="'Height'" filter="{ height: 'number'}" sortable="'height'">{{ block.height }}</td>
                </tr>
            </table>
        </div>

在Case1 中，当我打开目标页面时，表格保持为空，当我点击任何排序按钮时，会出现表格数据（它会搜索并排序存储在tableData变量中的数据，该变量用于NgTableParams的dataset属性中

在Case2 中，当我打开目标页面时，表格会根据需要填充所有数据，但是当我进行排序/搜索时，它再次点击不需要的API服务器，因为我在这种情况下显示的数据非常少（这就是为什么我尝试使用dataset属性而不是getData函数属性，但它没有在页面加载时显示数据）< / p>

------- ------- EDIT

案例1在查询完成时使用self.tableParams.reload();解决了，所以我改了，

tableData = TemplateBlockFactory.query();

到

tableData = TemplateBlockFactory.query({}, 
                function(data) { 
                    self.tableParams.reload(); 
                });

如何使用ngResource填充ngTable中的数据，但无需点击API调用即可搜索和排序？

0 个答案: