javascript - enable - Angularjs ui-grid Filtro del campo de entrada de texto

ui-grid angularjs

Question

Tal vez alguien me pueda ayudar con un pequeño problema. Soy bastante nuevo en el campo de la programación web, pero tengo experiencia en programación. Me gustaría desarrollar un sitio web pequeño que use angularjs y ui-grid. Desafortunadamente, el filtrado no funciona desde campos de entrada externos.

¿Podría alguien decirme dónde está mi error de programación?

El código se puede encontrar aquí: http://plnkr.co/edit/fiA666OzpBqpTrCiuXER?p=preview

    var myDummyData = [{name: "Moroni", age: 50},
        {name: "Tiancum", age: 43},
        {name: "Jacob", age: 27},
        {name: "Nephi", age: 29},
        {name: "Enos", age: 34}];
    var myDummyData2 = [{name: "aTest", age: 50},
        {name: "bTest1", age: 43},
        {name: "cTest2", age: 27},
        {name: "dTest3", age: 29},
        {name: "eTest4", age: 34}];

    $scope.filterOptions = {
        filterText: ''''
    };

    $scope.gridOpts = {
        data: myDummyData,
        enableFiltering: true,
        columnDefs: [
                    {name: ''Name'', field: ''name'', enableFiltering: true
                        , filter: {
                            term: $scope.filterOptions.filterText //DOES NOT WORK... BUT WHY
                        }
                    },
                    {name: ''Price'', field: ''age''}
                ]
    };


    $scope.updateData = function(newValue){
         //console.log($scope.gridOpts.data);

         console.log($scope.gridOpts.columnDefs[0].filter);
         $scope.gridOpts.columnDefs[0].filter = {term: newValue};
         console.log("Scope nameid set " + $scope.gridOpts.columnDefs[0].filter.term); //is set but no update
         //$scope.$apply(); //not possible gives error! WHY??


         //$scope.gridOpts.data = myDummyData; //for testing works
    };


    $scope.swapData = function () {
        if ($scope.gridOpts.data === myDummyData) {
            $scope.gridOpts.data = myDummyData2;
        }
        else {
            $scope.gridOpts.data = myDummyData;
        }
    };

    //DOES NOT WORK BUT WHY
//        $scope.$watch(''filterOptions.filterText'', function (newValue, oldValue) {
//            if ($scope.filterOptions.filterText) {
//                $scope.filteringText = newValue;
//                $scope.updateData(newValue);
//            }
//        });

La idea es tener una barra de navegación que contenga un campo de búsqueda. Más tarde quiero filtrar en función de rangos deslizantes en columnas adicionales. Sin embargo, ni siquiera el filtrado de cadenas estándar funciona en mi ejemplo.

Preguntas:

1. ¿Alguien podría decirme dónde está mi problema actual? Más específicamente: ¿Por qué no funciona el filtrado desde campos de entrada externos?
2. La otra pregunta es ¿cómo puedo vincular los valores mínimo y máximo de los controles deslizantes de rango a, por ejemplo, la columna de edad en mi ejemplo? (directamente relacionado con el problema vinculante en cuestión (1))

Busqué respuestas a mi alrededor, pero esto es directamente un problema del enlace que no puedo entender, un problema de js de programación o una actualización de ngGrid para ui-grid.

Muchas gracias por adelantado

Answer 1

La respuesta a su primera pregunta es que aún no han realizado una opción de búsqueda global para el UI-Grid, por lo que debe trabajar un poco. La forma actual en que funcionan los filtros de columna es angular vigila el campo de entrada del filtro de columna en busca de un cambio, y cuando escribe en el cuadro, actualiza su filtro. Por lo tanto, su filtro no se aplicará a menos que fuerce este cuadro de entrada para activar el evento de cambio. La solución es simplemente filtrar los datos y volver a cargar. Por ejemplo:

En su cuadro de búsqueda de entrada HTML, agregue una actualización

<input ng-model="searchText" ng-change="refreshData()" placeholder="Search...">

entonces en tu app.js

$scope.refreshData = function() {
  $scope.myGrid.data = $filter(''filter'')($scope.data, $scope.searchText);
};

Ah, y no olvides incluir $ filter en tu controlador

app.controller(''myController'', function($scope, $filter) {}

Bifurqué tu ejemplo y lo modifiqué con esta solución. Compruébelo aquí: http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

Answer 2

prueba esto:

$scope.gridOpts = {
    data: myDummyData,
    enableFiltering: true,
    columnDefs: [
                {name: ''Name'', field: ''name'', enableFiltering: true
                    , filter: {
                        noTerm: true,
                        condition: function(searchTerm, cellValue) {
                            return (cellValue+"" === $scope.filterOptions.filterText+"");
                        }
                    }
                },
                {name: ''Price'', field: ''age''}
            ]
};

para el cuadro de entrada: <input ng-model="searchText" ng-change="refresh()" placeholder="Search...">

$scope.refresh = function()
{
    $scope.gridApi.core.refresh();
}

Espero que funcione...