Question

我正在尝试使用此库（https://github.com/angular-data-grid/angular-data-grid.github.io）按名称过滤Angular JS。问题是当我搜索它没有刷新！只有当我点击paginate o每页更改项目时。

我的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>

我的控制器：

    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()"

您还可以在控制器中定义gridActions1（但它看起来不是强制性的。）

$scope.gridActions1 = {};

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

grid-actions="gridActions1"

检查示例：previous issue with borrowing I had with rust-portaudio（搜索＆＃34; gridActions＆＃34;）

请注意：

grid-actions：控制器中的对象，具有更新网格的功能。您可以在控制器中传递字符串或创建空对象。使用此对象调用指令的方法：sort（），filter（），refresh（）。

您甚至可以使用自定义过滤器：https://github.com/angular-data-grid/angular-data-grid.github.io/blob/master/demo/100k/index.html

工作示例：https://github.com/angular-data-grid/angular-data-grid.github.io#custom-filters

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

1 个答案: