javascript - 过滤器不会在数据网格 AngularJS 中刷新

Question

我正在尝试使用此库 ( https://github.com/angular-data-grid/angular-data-grid.github.io ) 使用 Angular JS 按名称进行过滤。问题是当我搜索时它不刷新!仅当我点击分页或每页更改项目时。

我的 HTML:(我认为是 ng-change 的东西)

          <input id="orderIdFilter" type="text" class="form-control order-search-box"
                           placeholder="Enter User Name"
                           ng-change="gridActions1.filter()"
                           ng-model="name"
                           filter-by="nombre"
                           grid-id="grid1"
                           filter-type="text">

每页 HTML 项目(我已经尝试放置 ng-change=reloadGrid)

                   <div class="form-group items-per-page">
                            <label for="itemsOnPageSelect1">Items per page:</label>
                            <select id="itemsOnPageSelect1" class="form-control input-sm"
                                    ng-init="paginationOptions.itemsPerPage = '5'"
                                    ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
                                <option>5</option>
                                <option>10</option>
                                <option>50</option>
                            </select>
                        </div>

我的 Controller :

    var app = angular.module('myModule', ['ui.bootstrap', 'dataGrid', 'pagination']);
app.controller('ListaComprasController',['$scope', function($scope) {
            $scope.form = true;
            $scope.item = {};
            $scope.pagingOptions = {
                pageSizes: [5, 10, 20, 100],
                pageSize: 3,
                currentPage: 1
            };


        $scope.itens = [
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"}
        ];
            $scope.gridOptions = {
                data: $scope.itens, //required parameter - array with data
                //optional parameter - start sort options
                /*sort: {
                    predicate: 'nombre',
                    direction: 'asc'
                }*/
            };
            $scope.$watch(
                function() {
                    return {
                        currentPage: $scope.pagingOptions.currentPage,
                        pageSize: $scope.pagingOptions.pageSize
                    };
                },
                function(newVal, oldVal) {
                    // Reset to page 1 when the page size changes
                    if (newVal.pageSize !== oldVal.pageSize) {
                        $scope.pagingOptions.currentPage = 1;
                    }

                    //$scope.fillGrid($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize);
                },
                true);
        $scope.adicionaItem = function () {
            $scope.itens.push(
                {
                    nombre: $scope.item.nombre, 
                    telefono: $scope.item.telefono, 
                    descripcion: $scope.item.descripcion,
                    especialidades: $scope.item.especialidades,
                    dirreccion: $scope.item.dirreccion,
                    horarioDesde: $scope.item.horarioDesde,
                    horarioHasta: $scope.item.horarioHasta,
                    checkCom: $scope.item.checkCom,
                    nombreCom: $scope.item.nombreCom,
                    apellidoCom: $scope.item.apellidoCom,
                    telefonoCom: $scope.item.telefonoCom,
                    emailCom: $scope.item.emailCom
                }
            );
            $scope.item.produto = $scope.item.quantidade = '';
            toastr.success("Item adicionado com sucesso.");
            $scope.form = true;
        };
        $scope.addItem = function () {
            $scope.form = false;
        };
        $scope.editarItem = function(index){
            $scope.form = false;
            $scope.item = $scope.itens[index];
            $scope.edit = true;
        };

        $scope.applyChanges = function(index){
            $scope.item = {};
            $scope.form = false;
            $scope.edit = false;
            toastr.success("Item alterado com sucesso.");
        };
        $scope.CancelarItem = function(index){
            $scope.edit = false;
            $scope.form = true;
            $scope.item = {};
        };
        $scope.deleteItem = function(row){
            var index = $scope.gridOptions.data.indexOf(row.entity);
            $scope.gridOptions.data.splice(index, 1);
            console.log(index);
            //$scope.itens.splice(index, 1);
            toastr.success("Item removido com sucesso.");
        };   
}]);

Answer 1

您需要做的就是正确初始化网格。

您将过滤器输入引用到此函数:

ng-change="gridActions1.filter()"

您也可以在 Controller 中定义 gridActions1(但它看起来并不是强制性的)。

$scope.gridActions1 = {};

然后您需要在数据网格初始化中定义 gridActions1:

grid-actions="gridActions1"

检查示例:https://github.com/angular-data-grid/angular-data-grid.github.io/blob/master/demo/100k/index.html (搜索“gridActions”)

请注意:

grid-actions: object in your controller with functions for updating grid. You can pass string or create empty object in controller. Use this object for calling methods of directive: sort(), filter(), refresh().

您甚至可以自定义过滤器:https://github.com/angular-data-grid/angular-data-grid.github.io#custom-filters

工作示例:http://angular-data-grid.github.io/demo/bootstrap/multiple.html