如何使用angularjs過濾UI網格中顯示的數據？

這是我的代碼如何使用angularjs過濾UI網格中顯示的數據？

var app = angular.module('app', ['ui.grid']); 
 

 
app.controller('TableCrtl', ['$scope', '$filter', function ($scope, $filter) { 
 
     
 
     var myDummyData = [{name: "Moroni",address:"one", age: 50}, 
 
      {name: "Tiancum",address:"vij", age: 43}, 
 
      {name: "Jacob",address:"dfr", age: 27}, 
 
      {name: "Nephi",address:"mnc", age: 29}, 
 
      {name: "Enos",address:"trr", age: 34}]; 
 
     
 

 
     $scope.filterOptions = { 
 
      filterText: '' 
 
     }; 
 
     
 
     $scope.gridOpts = { 
 
      data: myDummyData, 
 
      // enableFiltering: true, 
 
      columnDefs: [ 
 
         {name: 'Name', field: 'name', enableFiltering: true}, 
 
         {name: 'Address', field: 'address', enableFiltering: true} 
 
        ] 
 
     }; 
 
     
 
     $scope.refreshData = function() { 
 
      $scope.gridOpts.data = $filter('filter')(myDummyData, $scope.searchText, undefined); 
 
     }; 
 
     
 
     
 
    }]);

/* Styles go here */ 
 

 
.cart-item.ng-enter { 
 
    -webkit-transition:0.5s linear all; 
 
    transition:0.5s linear all; 
 
    background-color: yellow; 
 
} 
 
.cart-item.ng-enter-active { 
 
    background-color: white; 
 
} 
 

 
.myGrid { 
 
    width: 1200px; 
 
    height: 800px; 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 
    <head> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script> 
 
     
 
     <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
     <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
     <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script> 
 
     
 
     
 
     
 
     <link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
     <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
 
    
 
     <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"> 
 
     <link rel="stylesheet" href="style.css" type="text/css"> 
 
     
 
     <link href="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.css" rel="stylesheet" type="text/css"/> 
 
     <script src="https://github.com/danielcrisp/angular-rangeslider/blob/master/angular.rangeSlider.js" type="text/javascript"></script> 
 
     
 
    </head> 
 
    <body ng-controller="TableCrtl"> 
 

 
     
 
     
 
     <div> 
 
      
 
      <br> 
 
      <br> 
 
      <input type="text" class="form-control" ng-change="refreshData()" placeholder="Produkt Name" ng-model="searchText"> 
 
      <br> 
 
      <div range-slider min="0" max="100" model-min="15" model-max="35"></div> 
 
      <br> 
 
      <div id="grid1" ui-grid="gridOpts" class="grid"></div> 
 
     </div> 
 

 
     <script src="script.js"></script> 
 
     
 
     
 
     
 
    </body> 
 
</html>

這是我的plunker： - http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview 在上面的代碼中，我有3點中的數據，但我想，以顯示UI電網兩列。當我搜索文本整個數據filterd，但我想過濾像UI-grid.i（名稱和地址只）顯示數據嘗試下面的代碼

$scope.refreshData = function() { 
     $scope.gridOpts.data = $filter('filter')(myDummyData.name, $scope.searchText, undefined); 
    };

來源

2015-10-29 durga siva kishore mopuru

你的問題是什麼？ – hic1086

在上面顯示的網格名稱和地址字段中。當用戶在過濾和顯示的searchtext數據中輸入年齡值時。例如： - 在搜索文本中輸入50，結果： - 一行數據（moroni），但我想顯示沒有記錄，因爲用戶輸入年齡值，我想搜索名稱和地址字段只有不是整個網格列。 –

不使用默認的過濾器，定義自定義過濾器哪些過濾器僅基於名稱和地址。這是基本的邏輯。

過濾：

app.filter('customfilter', function() { 
    //Your logic to filter based on name and address 
});

控制器：
在控制器進樣濾波器和使用它。

$scope.refreshData = function() { 
    $scope.gridOpts.data = $filter('customfilter')(arguments for filter); 
};

來源

2015-10-30 11:38:06 SaiGiridhar

可能這就是你要找的。

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
    var today = new Date(); 
    $scope.gridOptions = { 
    enableFiltering: false, 
    onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
    }, 
    columnDefs: [ 
     { field: 'name' }, 
     { field: 'address' }   
    ] 
    }; 

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

    $scope.singleFilter = function(renderableRows){ 
    var matcher = new RegExp($scope.filterValue); 
    renderableRows.forEach(function(row) { 
     var match = false; 
     [ 'name', 'address'].forEach(function(field){ 
     if (row.entity[field].match(matcher)){ 
      match = true; 
     } 
     }); 
     if (!match){ 
     row.visible = false; 
     } 
    }); 
    return renderableRows; 
    }; 
}]) 

});

該代碼複製自link。

onRegisterApi: function(gridApi){ 
     $scope.gridApi = gridApi; 
     $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200); 
    }

和「$ scope.singleFilter」是你需要看的主要東西。

來源

2015-10-30 13:14:58

如何使用angularjs過濾UI網格中顯示的數據？

回答

相關問題