AngularJS过滤通配符或符号排除答案

【问题标题】：AngularJS Filter Wildcard or Symbol ExcludeAngularJS过滤通配符或符号排除
【发布时间】：2017-04-26 15:26:09
【问题描述】：

使用ng-table，然后按产品名称过滤，我需要一个“Fantastic Product 01”搜索仍然显示“Fantastic® Product 01”--如果没有在过滤器中使用注册商标（®），该产品将不会显示输入。

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(?)

寻找通配符解决方案（适用于所有符号），例如输入“Fantastic*Product 01”将返回上述结果。或者完全忽略注册商标/符号，也许用空格代替。

【问题讨论】：

标签： angularjs angularjs-filter ngtable

【解决方案1】：

希望，它对你有用：

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>

【讨论】：