Javascript 如何过滤我的数据？（ng电网）_Javascript_Angularjs_Filtering_Ng Grid

Javascript 如何过滤我的数据？（ng电网）

javascript angularjs

Javascript 如何过滤我的数据？（ng电网）,javascript,angularjs,filtering,ng-grid,Javascript,Angularjs,Filtering,Ng Grid,我认为这很可能非常简单，但我找不到任何关于如何在他们网站上显示的“filterText”之外添加过滤器的清晰文档。我想做的事情很简单： $scope.filterOptions = { filter: $scope.myFilter, // <- How to do something like this? useExternalFilter: true } $scope.gridOptions = { data: 'entries',

我认为这很可能非常简单，但我找不到任何关于如何在他们网站上显示的“filterText”之外添加过滤器的清晰文档。我想做的事情很简单：

$scope.filterOptions = {
    filter: $scope.myFilter,  // <- How to do something like this? 
    useExternalFilter: true
}

$scope.gridOptions = {
        data: 'entries',
        enableColumnResize: false,
        multiSelect: false,
        enableSorting: false,
        selectedItems: $scope.selectedEntries,
        filterOptions: $scope.filterOptions
}

$scope.lowerLimit = 50;
// My Filter
$scope.myFilter = function(entry) { 
    if (entry < $scope.lowerLimit) {
        return false; 
    }
    return true;
 }

但它犯了不少错误

我找到了一种即时更新的方法。基本上，我持有所有数据的一个隐藏集，在收到新数据或更改过滤器时，我将此过滤器应用于完整的数据集，并将过滤后的版本交给网格

这让我可以在我的过滤器中使用比较器（即年龄>=50），这就是这个问题的目的

// Full unfiltered data set
$scope.entries = []; // Updated and pushed to

$scope.gridOptions = {
    // The grids already filtered data set
    data: 'filteredEntries',
    enableColumnResize: false,
    multiSelect: false,
    enableSorting: false,
    selectedItems: $scope.selectedEntries,
}

 $scope.$on("updateEntries", function(data) {
     // My table is filled by socket pushes, this is where it is updated.
     $scope.updateFilters();
 }

 $scope.$on("newFilter", function(newFilter) {
     // This is where I update my filter
     $scope.updateFilters();
 }

 $scope.updateFilters = function() {
     // Filters the full set and hands the result to the grid. 
     $scope.filteredEntries = $filter('filter')($scope.entries, $scope.myFilter);
     $scope.$digest();
 }         

 // A modifiable limit, modify through newFilter so data is refiltered
 $scope.lowerLimit = 50;

 // My Filter
 $scope.myFilter = function(entry) { 
     if (entry < $scope.lowerLimit) {
        return false; 
     }
     return true;
 }

//完整的未筛选数据集
$scope.entries=[]；//更新并推送到
$scope.gridOptions={
//网格已经过滤了数据集
数据：'filteredEntries'，
enableColumnResize:false，
多选：错，
启用排序：false，
selectedItems:$scope.selectedEntries，
}
$scope.$on（“updateEntries”，函数（数据）{
//我的表由套接字推送填充，这是更新的地方。
$scope.updateFilters（）；
}
$scope.$on（“newFilter”，函数（newFilter）{
//这是我更新过滤器的地方
$scope.updateFilters（）；
}
$scope.updateFilters=函数（）{
//过滤整个集合并将结果交给网格。
$scope.filteredEntries=$filter（'filter'）（$scope.entries，$scope.myFilter）；
$scope.$digest（）；
}         
//可修改的限制，通过newFilter进行修改，以便重新筛选数据
$scope.lowerLimit=50；
//我的过滤器
$scope.myFilter=函数（条目）{
如果（条目<$scope.lowerLimit）{
返回false；
}
返回true；
}

您可以使用angular绑定到

filterOptions.filterText

变量。这里有一个plunker来演示：

我将在下面发布相同的代码：

    // main.js
    var app = angular.module('myApp', ['ngGrid']);
    app.controller('MyCtrl', function($scope) {
      $scope.filterOptions = {
        filterText: ''
      };

      $scope.myData = [{name: "Moroni", age: 50},
                       {name: "Tiancum", age: 43},
                       {name: "Jacob", age: 27},
                       {name: "Nephi", age: 29},
                       {name: "Enos", age: 34}];

      $scope.gridOptions = {
        data: 'myData',
        filterOptions: $scope.filterOptions
      };
    });

上面的内容应该与文档页面上的掠夺物大致相同

    <!DOCTYPE html>
    <html ng-app="myApp">
        <head lang="en">
            <meta charset="utf-8">
            <title>Custom Plunker</title>  
            <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
            <link rel="stylesheet" type="text/css" href="style.css" />
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
            <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
            <script type="text/javascript" src="main.js"></script>
        </head>
        <body ng-controller="MyCtrl">
          <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />
          <br/>
          <br/>
          <div class="gridStyle" ng-grid="gridOptions"></div>
        </body>
    </html>


海关抢劫犯
过滤器：

请注意

上的

ng model=“filterOptions.filterText”

。这就是我的解决方案！！它是用ng网格发现的在html中：

//JSON

 [
{"I": "3001", "T": "F", "N": "3", "L": "01 a", "P": "HE IDO ALL\u00cd DOS VECES ESTA SEMANA", "R": "I'VE GONE THERE TWICE THIS WEEK"},
{"I": "3002", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L ME HA LLAMADO VARIAS VECES HOY", "R": "HE'S CALLED ME SEVERAL TIMES TODAY"},
 {"I": "3003", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS LLEGADO A UNA CONCLUSI\u00d3N", "R": "WE'VE REACHED A CONCLUSION"},
 {"I": "3004", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS DECIDIDO CANCELAR EL PROYECTO", "R": "WE'VE DECIDED TO CANCEL THE PROJECT"},
 {"I": "3005", "T": "F", "N": "3", "L": "01 a", "P": "NO HAN HECHO NADA", "R": "THEY HAVEN'T DONE ANYTHING"},
 {"I": "3006", "T": "F", "N": "3", "L": "01 a", "P": "HE PROBADO MUCHAS DIFERENTES PROFESIONES", "R": "I'VE TRIED MANY DIFFERENT PROFESSIONS"},
 {"I": "3007", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L HA PERDIDO LA VOZ", "R": "HE'S LOST HIS VOICE"}, 
{"I": "3008", "T": "F", "N": "3", "L": "01 a", "P": "ELLA NO HA VENIDO POR AQU\u00cd \u00daLTIMAMENTE"}
]

看看这个。我在搜索中确实看到了这个，但这也是为了匹配字符串的某些或部分，我想根据自定义函数返回的true或false进行筛选。这是一个好问题。：）我希望在这个

{COL_FIELD custom_FILTERS}上有一个自定义_筛选器

可以工作，但这只过滤一个值，而不是数组。代码来源：与

columnDefs

cellFilter

选项有相同的问题。它只过滤单个值，而不是数组。这不会进行问题所问的数字比较。@bmm6o为此，您实际上需要创建自己的外部过滤器这会在数据进入网格之前改变数据。检查这个plunker：您有工作样本吗？在JSFIDLE或plunkr中？这会有很大帮助

<input type="text" ng-model="miinput" placeholder="Filter text"/>
<div class="gridStyles" ng-grid="gridOpciones">
</div>

//pagination
$scope.filterOptions = {
    filterText: $scope.miinput,
    useExternalFilter: true
}; 
$scope.totalServerItems = 0;
$scope.pagingOptions = {
    pageSizes: [10, 25, 50],
    pageSize: 10,
    currentPage: 1
};  
$scope.setPagingData = function(data, page, pageSize){  
    var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
    $scope.vocabulario = pagedData;
    $scope.totalServerItems = data.length;
    if (!$scope.$$phase) {
        $scope.$apply();
    }
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
    setTimeout(function () {
        var data;
        if (searchText) {
            var ft = searchText.toLowerCase();
            $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {     
                data = largeLoad.filter(function(item) {
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                });
                $scope.setPagingData(data,page,pageSize);
            });            
        } else {
            $http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
                $scope.setPagingData(largeLoad,page,pageSize);
            });
        }
    }, 100);
};

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);

//cada vez que escribo en el input
$scope.$watch('miinput', function () {
    if ($scope.miinput !== "") {
        $scope.pagingOptions.currentPage=1;
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.miinput);
    }else{
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);


 //
 $scope.gridOpciones = { 
    data: 'vocabulario',
    showGroupPanel: true,
    enableCellSelection: true,
    enableRowSelection: true,
    enableCellEdit: true,
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    columnDefs: [
    {field:'I', displayName:'Id', width:60,resizable: true}, 
    {field:'T', displayName:'Type',visible:false,resizable: true},
    {field:'N', displayName:'Level',width:60},
    {field:'L', displayName:'List',width:100},
    {field:'P', displayName:'English',minWidth: 400},
    {field:'R', displayName:'Spanish', minWidth: 400}]
 };

 [
{"I": "3001", "T": "F", "N": "3", "L": "01 a", "P": "HE IDO ALL\u00cd DOS VECES ESTA SEMANA", "R": "I'VE GONE THERE TWICE THIS WEEK"},
{"I": "3002", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L ME HA LLAMADO VARIAS VECES HOY", "R": "HE'S CALLED ME SEVERAL TIMES TODAY"},
 {"I": "3003", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS LLEGADO A UNA CONCLUSI\u00d3N", "R": "WE'VE REACHED A CONCLUSION"},
 {"I": "3004", "T": "F", "N": "3", "L": "01 a", "P": "HEMOS DECIDIDO CANCELAR EL PROYECTO", "R": "WE'VE DECIDED TO CANCEL THE PROJECT"},
 {"I": "3005", "T": "F", "N": "3", "L": "01 a", "P": "NO HAN HECHO NADA", "R": "THEY HAVEN'T DONE ANYTHING"},
 {"I": "3006", "T": "F", "N": "3", "L": "01 a", "P": "HE PROBADO MUCHAS DIFERENTES PROFESIONES", "R": "I'VE TRIED MANY DIFFERENT PROFESSIONS"},
 {"I": "3007", "T": "F", "N": "3", "L": "01 a", "P": "\u00c9L HA PERDIDO LA VOZ", "R": "HE'S LOST HIS VOICE"}, 
{"I": "3008", "T": "F", "N": "3", "L": "01 a", "P": "ELLA NO HA VENIDO POR AQU\u00cd \u00daLTIMAMENTE"}
]