[AngularJS]在 jQuery 中的筛选器表吗?或 angularJS

发布时间: 2017/4/16 14:57:17
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要能够筛选我的桌子,桌子是这个样子

name   |    date     |   agencyID
test      2016-03-17     91282774
test      2016-03-18     27496321

我想能有一个下拉列表与 'agencyID',当我选择它只显示与此在的 agencyID 表中的行。我有类似的事情,你可以搜索中输入文本的任何东西。

这是那部分是如何工作的有没有任何类似的方式,我可以这样做一个选择下拉列表?

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

}(jQuery));

我打开执行 angularJS,如果这是一个更好的替代

解决方法 1:

你可以上的更改处理程序选择降。

html:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<select id="filter">
  <option value="">Choose a filter</option>
  <option value="1231423424">1231423424</option>
  <option value="456456e54">456456e54</option>
  <option value="123488745">123488745</option>
</select>

<table id="searchable">
  <tr>
    <th>name</th>
    <th>date</th>
    <th>agencyID</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>date 1</td>
    <td>1231423424</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>date 2</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>date 3</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 4</td>
    <td>date 4</td>
    <td>123488745</td>
  </tr>
  <tr>
    <td>test 5</td>
    <td>date 5</td>
    <td>123488745</td>
  </tr>
</table>

Javascript:

$(document).ready(function(){

    $('#filter').change(function(){

    var filterValue = $(this).val();
    if(filterValue==""){
        $("#searchable tr").show();
    } else{
      $("#searchable tr").hide();
      $("#searchable td:nth-child(3)").each(function(){
        if( $(this).text() == filterValue){
          $(this).parent().show();
        }
      });
    }
  });

});

看到它在小提琴

赞助商