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過濾器通配符或符號排除

回答

相關問題