使用AngularJS进行过滤时如何显示内容

Question

使用AngularJS进行过滤时如何显示内容

在角度我有一个表和一个搜索框,用户可以在其中键入和角度将搜索数据并显示一个表.问题是我有足够的数据可以减慢过滤速度,在这种情况下,我想显示一个微调器:

示例类似于我的html:

<body ng-controller="MainCtrl">

Search: <input ng-model="searchText">
<table id="searchTextResults">
  <tr><th>Name</th><th>Phone</th><th>Address</th><th>City</th><th>Zip</th><th>Country</th></tr>
  <tr ng-repeat="friend in friends | filter:searchText">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.address}}</td>
    <td>{{friend.city}}</td>
    <td>{{friend.zip}}</td>
    <td>{{friend.country}}</td>
  </tr>
</table>
<div class='myspinner' > <!-- display only if filtering is occurring -->

Run Code Online (Sandbox Code Playgroud)

问题是,每次进行过滤时如何显示微调器？

spinner div的CSS:

.myspinner {
       position: absolute;
       left: 45%;
       top: 45%;
       height:50px;
       width:50px;
       margin:0px auto;
       position: absolute;
       -webkit-animation: rotation .6s infinite linear;
       -moz-animation: rotation .6s infinite linear;
       -o-animation: rotation .6s infinite linear;
       animation: rotation .6s infinite linear;
       border-left:6px solid rgba(0,170,240,.25);
       border-left: 6px solid rgba(0,170,240,.25);
       border-right: 6px solid rgba(0,170,240,.25);
       border-bottom: 6px solid rgba(0,170,240,.25);
       border-top: 6px solid rgba(0,170,240,.6);
       border-radius:100%;
    }

Run Code Online (Sandbox Code Playgroud)

链接到plunkr:http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG？p = preview

Answer 1

lus*_*ter 0

您可能还需要创建自己的指令来过滤信息，默认的 ng-filter 很慢，因为它会检查对象上的所有字段。

您可以创建一个自定义 ng-directive 来过滤您的特定字段，看看

归档时间：	11 年，11 月前
查看次数：	1307 次
最近记录：	7 年，4 月前