javascript - 需要使用 angular-smart-table 进行正则表达式过滤

Question

我正在使用 Angular 智能 table 。智能表使用 st-search 指令内置过滤。但是，我需要使用正则表达式进行一些自定义过滤。

我尝试将 Angular 过滤器应用于我的数据源(通过 ng-repeat 指令)。虽然这适用于过滤，但由于智能表不知道我在做什么，它会导致我的分页失败。

我已经plunked an example正在发生的事情。 (尝试在帐户过滤器输入框中输入 1.8。您将看到过滤器已应用，但如果您单击其他页面，您将看到它们也包含一些过滤的项目。)我需要类似的行为如果您按描述进行过滤(过滤后的项目会缩小范围并重新分页)，会发生什么情况。

这是我的 html 表格:

        <table st-table="vm.accounts" class="table table-striped table-hover table-condensed">
      <thead>
        <tr>
          <th st-sort="account">Account</th>
          <th st-sort="desc">Description</th>
          <th>Current Balance</th>
          <th> </th>
          <th> </th>
        </tr>
        <tr class="warning">
          <th>
            <input placeholder="filter accounts" class="form-control input-sm" type="search" ng-model="vm.accountfilter" />
          </th>
          <th>
            <input placeholder="filter description" class="form-control input-sm" type="search" st-search="desc" />
          </th>
          <th colspan="3"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in vm.accounts | filter:vm.myfilter" ng-click="vm.selected = item" ng-class="{info: vm.selected == item}">
          <td>{{item.account}}</td>
          <td>{{item.desc}}</td>
          <td>{{item.runbal | currency}}</td>
          <td><button class="btn btn-danger btn-xs"><i class="fa fa-times-circle"></i></button></td>
          <td><button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="warning">
          <td colspan="5" class="text-center">
          <button class="btn btn-success btn-sm"><i class="fa fa-plus-circle"></i> Add new account</button>
          </td>
        </tr>
        <tr>
          <td colspan="5" class="text-center">
            <div st-pagination="" st-items-by-page="20" st-displayed-pages="10"></div>
          </td>
        </tr>
      </tfoot>
    </table>

这是我尝试应用的过滤器(从我的 Controller ):

(function(){
 'use strict';

 angular.module("myapp", ["smart-table"])
 .controller("mycontroller", MyController);

function MyController(){
var me = this;
me.accounts = [];
me.selected = null;
me.myfilter = myFilter;
me.accountfilter = '';

activate();

function activate(){
  for(var x = 0; x < 6000; x++)
  {
    var build = '';
    for(build; build.length < (12 / x.toString().length); build += x.toString()){}

    var aclass = Math.floor((1800 - 1100 + 1) * Math.random() + 1100).toString();
    var adept = Math.floor((800 - 100 + 1) * Math.random() + 100).toString();
    var aincex = Math.floor(1001 * Math.random() + 4000).toString();
    var asub = Math.floor(2 * Math.random());

    var account = aclass + adept + aincex + (asub ? "AB" + x.toString() : "");
    me.accounts.push({account: account, desc: "Text for " + x + " Account", runbal: x * 5, begbal: 5000, newbegbal: 20000, newrunbal: x * 7});
  }
}

function myFilter(value, index, array){
  if(!me.accountfilter) return true;

  var valex = new RegExp("^[*0-9a-zA-Z.]{1,22}$");
  if(me.accountfilter.match(valex))
  {
    var filter = me.accountfilter;
    debugger;
    filter = filter.replace(/\*/g,'\\w+');
    filter = "^" + filter + ".*$";
    var regex = new RegExp(filter,'i');
    return value.account.match(regex)
  }
  else
    return false;
}
}
})();

如何“智能表启用”我的过滤器？

Answer 1

我的怀疑是正确的。我不确定这是否是最好的方法，但这是我完成特殊过滤的方法。

我对 html 进行了 3 处更改。

1. 我添加了st-pipe给我的<table>元素。

   <table st-pipe="vm.pipe" st-table="vm.accounts" ... >
   

2. 我从我的 ng-repeat 中删除了 Angular 过滤器.

   <tr ng-repeat="item in vm.accounts" ... >
   

3. 我在帐户列上使用了智能表格搜索功能(代替我删除的 Angular 过滤器)。

   <input st-search="account" ... />
   

在我的 Controller 中，我添加了以下内容:

...
var internalList = [];
me.pipe = Pipe;

function Pipe(tableState){
  var perpage = tableState.pagination.number;
  var start = tableState.pagination.start;

  var filtered = internalList;

  //If user has entered filter criteria
  if(tableState.search.predicateObject)
  {
    //clone the filter criteria object
    var myPred = $.extend({},tableState.search.predicateObject);

    //remove the account criteria so I can process that myself
    delete myPred["account"];

    //perform the default filter function for any other filters
    filtered = $filter('filter')(filtered, myPred);

    //if user entered account (regex) filter then call my original filter function
    if(tableState.search.predicateObject["account"])
    {
      filtered = $filter('filter')(filtered,myFilter);
    }
  }

    //apply any sorting that needs to be applied
    if (tableState.sort.predicate) {
        filtered = $filter('orderBy')(filtered, tableState.sort.predicate, tableState.sort.reverse);
    }

  //set the bound array to the filtered contents
  me.accounts = filtered.slice(start, start +perpage);

  //clear the selected item if it is not included on the current page
  if(me.accounts.indexOf(me.selected) < 0)
    me.selected = null;

  //Set the proper number of pages for our filtered list
  tableState.pagination.numberOfPages = (filtered.length ? Math.floor(filtered.length / perpage) : 0);
}

最后，我必须更改 Controller 的激活函数以填充内部列表而不是显示/绑定(bind)列表。

//me.accounts.push({account: account, desc: "Text for " + x + " Account", runbal: x * 5, begbal: 5000, newbegbal: 20000, newrunbal: x * 7});
internalList.push({account: ...});

您可以see it in action在这里。