Question

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

我尝试将角度过滤器应用于我的数据源（通过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>

这是我尝试应用的过滤器（来自我的控制器）：

(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次更改。

我已将st-pipe添加到我的<table>元素。

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

我从ng-repeat删除了角度过滤器。

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

我在帐户列上使用了智能表搜索功能（代替我删除的角度过滤器）。
```
<input st-search="account" ... />
```

在我的控制器中，我添加了以下内容：

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

最后，我必须更改控制器的激活功能以填充internalList而不是显示/绑定列表。

//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在这里。

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

1 个答案: