过滤结果以显示与ng匹配的结果显示angular js

filter results to show matching results with ng-show angular js

本文关键字：显示 结果 angular js ng 过滤      更新时间：2023-09-26

我可以用下面的方法过滤结果，所有条目都显示在页面上

    <body ng-app="">
        <div ng-init="friends = [{name:'John', phone:'555-1276'},
                               {name:'Mary', phone:'800-BIG-MARY'},
                               {name:'Mike', phone:'555-4321'},
                               {name:'Adam', phone:'555-5678'},
                               {name:'Julie', phone:'555-8765'},
                               {name:'Juliette', phone:'555-5678'}]"></div>
      Search: <input ng-model="searchText">
      <table id="searchTextResults">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:searchText">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
    </body>

我试图实现的是一个jquery UI自动完成类型的解决方案，最初页面上什么都没有，但当你键入匹配的条目时就会出现。

我想我可以用ng秀来做这件事，到目前为止我只能做的例子

ng-show="searchText == 'John'"

这意味着除非你输入John，否则它永远是空白的。有没有一种方法可以像过滤器一样使用ng-show或ng-if来过滤（显示匹配的条目）？我有下面的例子演示我的约翰

    <body ng-app="">
        <div ng-init="friends = [{name:'John', phone:'555-1276'},
                               {name:'Mary', phone:'800-BIG-MARY'},
                               {name:'Mike', phone:'555-4321'},
                               {name:'Adam', phone:'555-5678'},
                               {name:'Julie', phone:'555-8765'},
                               {name:'Juliette', phone:'555-5678'}]"></div>
      Search: <input ng-model="searchText">
      <table id="searchTextResults">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends | filter:searchText" ng-show="searchText == 'John'">
          <td>{{friend.name}}</td>
          <td>{{friend.phone}}</td>
        </tr>
      </table>
    </body>

我也试过

        ng-show="searchText == searchText"

但这只是显示所有项目？这可以用ng秀来完成吗？有更好的方法吗？

您想要创建一个自定义过滤器。这可以很容易地完成。此筛选器将根据搜索结果测试您朋友的姓名。如果

app.filter('filterFriends', function() {
    return function(friends, search) {
        if (search === "") return friends;
        return friends.filter(function(friend) {
           return friend.name.match(search); 
        });
    }
});

这应该让你对如何创建过滤器有一个很好的想法，你可以根据自己的喜好进行自定义。在你的HTML中，你会这样使用它。

<input ng-model="search">
<tr ng-repeat="friend in friends | filterFriends:search">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
</tr>

这是一个JSFiddle。

我认为这样做会更容易：

<tr ng-repeat="friend in friends" ng-show="([friend] | filter:search).length > 0">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
</tr>

同样，通过这种方式，过滤器将应用于所有属性，而不仅仅是名称。

相关文章：