WebHU - Programozási kérdések és válaszok

Szerveroldali szűrés ng-griddel: kötési probléma?

Ezt az előző bejegyzésre hivatkozva teszem közzé Szerveroldali lapozás + szűrés + rendezés az ng-gridhez WebAPI-val, abban a reményben, hogy végre sikerül egy egyszerű, de működő mintát készíteni az ng-grid külső adatforrásokkal való használatáról. Eddig a pontig sikerült megvalósítanom a külső lapozást és rendezést, de problémám van a szűréssel.

Úgy tűnik, hogy az ng-grid szűrőbeállítások filterText tulajdonsága nincs a nézethez kötve. Amikor beírok valamit az ng-grid szűrőjének szövegébe, a $watch-ed függvényem nem hívódik meg, így nincs lehetőségem szűrt adatokat kérni a szervertől. Mégis, ugyanazok az órakifejezések jól működnek, ha pl. lapozáshoz vagy rendezéshez.

Kicsit ásva találtam ezt a bejegyzést https://github.com/angular-ui/ng-grid/pull/456 egy hibáról szól ezen a területen, de nem világos, hogy ez még nyitott kérdés-e. Tudna valaki segíteni? Íme a vonatkozó JS kódrészlet:

var app = angular.module('MyApp', ['ngGrid']);
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
    $scope.items = [];
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [25, 50, 100],
        pageSize: 25,
        currentPage: 1
    };
    $scope.sortOptions = {
        // omitted for brevity...
    };

    $scope.gridOptions = {
        data: "items",
        columnDefs: [
            { field: "id", displayName: "ID", width: "60" },
            { field: "name", displayName: "Name", pinnable: true },
            { field: "age", displayName: "Age", width: "60" },
            { field: "isFemale", displayName: "F", width: "40" }
        ],
        enablePaging: true,
        enablePinning: true,
        pagingOptions: $scope.pagingOptions,        
        filterOptions: $scope.filterOptions,
        keepLastSelected: true,
        multiSelect: false,
        showColumnMenu: true,
        showFilter: true,
        showGroupPanel: true,
        showFooter: true,
        sortInfo: $scope.sortOptions,
        totalServerItems: "totalServerItems",
        useExternalSorting: true,
        i18n: "en"
    };

    $scope.refresh = function() {
        setTimeout(function () {
            // call the server and get data into $scope.items...
        }, 100);
    };

    // this WORKS    
    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    // this DOES NOT WORK: the function never gets called
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    // this WORKS
    $scope.$watch('sortOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.refresh();
        }
    }, true);

    $scope.refresh();
}]);
25.07.2013

  • találtál erre valami megoldást? 20.01.2014
  • Sajnálom, hogy nem tettem, mert időközben más követelmények miatt váltottam át egy másik típusú adatmegjelenítésre az alkalmazásban. Mégis, jó lenne egy egyszerű, működő példa az ilyen, rácsot igénylő forgatókönyvekre. 20.01.2014

Válaszok:


1

Lehet, hogy késő lesz, de jobb későn, mint soha :)

Sikerrel jártam azzal, hogy közvetlenül kapcsolódtam a gridOptions filterText tulajdonságához, az alábbiak szerint

$scope.$watch('gridOptions.$gridScope.filterText', function (newVal, oldVal) {
        if (newVal !== oldVal) {
        }
}, true);
10.07.2014
  • Köszönöm tesó, ez nálam működik. $gridScope a kulcs @_@ 17.08.2014
  • Új anyagok

    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...

    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..

    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..

    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..

    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..

    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..

    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..