AngularJS过滤器通配符或符号排除

使用ng-table，然后按产品名称过滤，我需要一个“Fantastic Product 01”搜索以仍显示“Fantastic®Product 01” - 产品不会显示未使用注册商标（® ）在过滤器输入中。AngularJS过滤器通配符或符号排除

angular 
    .module('testApp',['ngTable']) 
    .controller('testCtrl', 
    function($scope,$filter,ngTableParams){ 
     $scope.products = [{"name": "Fantastic® Product 01","price":1.99},{"name": "Fantastic® Product 02","price":2.99}]; 
     $scope.productListParams = new ngTableParams({ 
      page: 1, 
      count: $scope.products.length 
     }, { 
      counts: [], 
      total: $scope.products.length, 
      getData: function ($defer, params) { 
       var filteredData = params.filter() ? $filter('filter')($scope.products, params.filter()) : $scope.products; 

       var orderedData = params.sorting() ? 
            $filter('orderBy')(filteredData, params.orderBy()) : filteredData; 

       if (orderedData) { 
        params.total(orderedData.length); 
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
       } else { 
        $defer.reject(); 
       } 
      } 
     }); 
    });

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- ANGULAR --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script> 
    <!-- NG-TABLE --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script> 
    </head> 
    <body ng-app="testApp" ng-controller="testCtrl"> 
    <table class="table table-striped" ng-table="productListParams" show-filter="true"> 
     <tbody> 
      <tr ng-repeat="product in $data"> 
       <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{product.name}}</td> 
       <td data-title="'Price'" sortable="'price'" filter="{ 'price': 'number' }">{{product.price | currency}}</td> 
      </tr> 
     </tbody> 
    </table> 
    </body> 
</html>

Plnkr例如：https://plnkr.co/edit/rAxVan5OnikCIzRDtMIB?p=preview

$filter(?)

寻找一个通配符解决方案（包括所有符号的工作），例如输入 “梦幻*产品01” 将返回上述结果。或者完全忽略注册的商标/符号，也许用空格替换。

来源

2017-04-26 Cody

希望，这对你的作品：

angular 
 
    .module('testApp',['ngTable']) 
 
    .controller('testCtrl', 
 
    function($scope,$filter,ngTableParams){ 
 
     $scope.products = [{"name": "Fantastic® Product 01","price":1.99},{"name": "Fantastic® Product 02","price":2.99}]; 
 
     $scope.productListParams = new ngTableParams({ 
 
      page: 1, 
 
      count: $scope.products.length 
 
     }, { 
 
      counts: [], 
 
      total: $scope.products.length, 
 
      getData: function ($defer, params) { 
 
       debugger; 
 
       var filteredData = params.filter() ? $filter('filter')($scope.products, params.filter()) : $scope.products; 
 

 
       for(var i=0;i<filteredData.length;i++){ 
 
        filteredData[i].name=filteredData[i].name.replace(/[^a-zA-Z 0-9]+/g,""); 
 
       } 
 

 
       var orderedData = params.sorting() ? 
 
            $filter('orderBy')(filteredData, params.orderBy()) : filteredData; 
 

 
       //orderedData[0].name=orderedData[0].name.replace(/[^a-zA-Z ], ""); 
 
       if (orderedData) { 
 
        params.total(orderedData.length); 
 
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
 
       } else { 
 
        $defer.reject(); 
 
       } 
 
      } 
 
     }); 
 
    });

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <!-- ANGULAR --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script> 
 
    <!-- NG-TABLE --> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script> 
 
    </head> 
 
    <body ng-app="testApp" ng-controller="testCtrl"> 
 
    <table class="table table-striped" ng-table="productListParams" show-filter="true"> 
 
     <tbody> 
 
      <tr ng-repeat="product in $data"> 
 
       <td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">{{product.name}}</td> 
 
       <td data-title="'Price'" sortable="'price'" filter="{ 'price': 'number' }">{{product.price | currency}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </body> 
 
</html>

来源

2017-04-26 16:32:44

AngularJS过滤器通配符或符号排除

回答

相关问题