2016-11-07 58 views
1

我正在使用Angular UI網格來顯示字段。UI網格過濾器 - 無效的正則表達式

我有一個文本框,用戶可以篩選網格中的所有列。但是,當像 「(」 或 「*」 產生錯誤的用戶將文本:無效的正則表達式

下面是代碼:

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: 'gender', cellFilter: 'mapGender' }, 
 
     { field: 'company' }, 
 
     { field: 'email' }, 
 
     { field: 'phone' }, 
 
     { field: 'age' }, 
 
     { field: 'mixedDate' } 
 
    ] 
 
    }; 
 

 
    $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
 
    .success(function(data) { 
 
     $scope.gridOptions.data = data; 
 
     $scope.gridOptions.data[0].age = -5; 
 

 
     data.forEach(function addDates(row, index){ 
 
     row.mixedDate = new Date(); 
 
     row.mixedDate.setDate(today.getDate() + (index % 14)); 
 
     row.gender = row.gender==='male' ? '1' : '2'; 
 
     }); 
 
    }); 
 
    
 
    $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', 'company', 'email' ].forEach(function(field){ 
 
     if (row.entity[field].match(matcher)){ 
 
      match = true; 
 
     } 
 
     }); 
 
     if (!match){ 
 
     row.visible = false; 
 
     } 
 
    }); 
 
    return renderableRows; 
 
    }; 
 
}]) 
 
.filter('mapGender', function() { 
 
    var genderHash = { 
 
    1: 'male', 
 
    2: 'female' 
 
    }; 
 

 
    return function(input) { 
 
    if (!input){ 
 
     return ''; 
 
    } else { 
 
     return genderHash[input]; 
 
    } 
 
    }; 
 
});
.grid { 
 
    width: 500px; 
 
    height: 450px; 
 
}
<!doctype html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.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.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="MainCtrl"> 
 
    <input ng-model='filterValue'/><button ng-click='filter()'>Filter</button> 
 
    <div id="grid1" ui-grid="gridOptions" class="grid"></div> 
 
</div> 
 

 

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

感謝

回答

1

您可以轉義RegEx輸入(請參閱the answer to this question瞭解可用的功能):

str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 

然後可以使用這段代碼在你的$scope.singleFilter功能如下:

$scope.singleFilter = function(renderableRows) { 
    var filterVal = undefined; 
    if ($scope.filterValue != undefined) { 
     // Escape RegEx 
     filterVal = $scope.filterValue.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
    } 
    ... 
} 

我已經在這個問題你的代碼中創建this Fiddle。您將能夠從小提琴中看到,因爲它不再生成Javascript錯誤。由於您只是在「名稱」,「公司」和「電子郵件」列上進行篩選,因此我看不到包含「(」的任何數據,但如果您添加「電話」列,則應該可以在濾波器工作中看到輸入(9