Question

这是我的代码

＆＃13;

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);
        };
        
       
    }]);

＆＃13;

/* 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;
}

＆＃13;

<!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="bootstrap@*" 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>

＆＃13;

这是我的傻瓜： - http://plnkr.co/edit/qmVtzQLiZVZKyQCQSApT?p=preview 在上面的代码中我有3列数据，但我想在ui-grid中显示两列。当我搜索文本整个数据过滤，但我想过滤显示数据，如（仅名称和地址）在ui-grid.i尝试以下代码

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

Answer 1

可能这就是你要找的东西。

$ python runner.py --env=target_env --props name1=value1 name2=value2 --timeout=300 module/

代码是从link复制的。在

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;
  };
}])

});

和“$ scope.singleFilter”是您需要关注的主要内容。

Answer 2

不使用默认过滤器，而是定义仅根据名称和地址进行过滤的自定义过滤器。这是基本逻辑。

过滤器：

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

控制器：
在控制器中注入过滤器并使用它。

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

如何使用angularjs过滤ui-grid中显示的数据？

2 个答案: