Question

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

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”将返回上述结果。或者完全忽略注册商标/符号，也许用空格代替。

Answer 1

希望，它适合你：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

1 个答案: