angularjs – Angular JS ng：基于select选项重复过滤

发布时间：2020-12-17 07:10:15 所属栏目：安全来源：网络整理

导读：我是Angular的新手.我试图根据用选择框选择的选项过滤显示的数据集. div ng-controller="CurrentTrandetailsController" div div class="pull-right" label for="show-filter" class="show-label"Show /label select name="show-filter" ng-model="searchTex

我是Angular的新手.我试图根据用选择框选择的选项过滤显示的数据集.

<div  ng-controller="CurrentTrandetailsController">
    <div>
        <div class="pull-right">        
            <label for="show-filter" class="show-label">Show </label>
            <select name="show-filter"  ng-model="searchText.accruedcard" id="show-filter"  ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails ">
                <option value="">All</option>
            </select>                       
        </div>
        <h3>Current trandetails</h3>
    </div>
    <div>
        <table class="table table-striped table-hover">
            <tbody>
                <tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText">
                    <td>{{trandetail.dateAccrued}}</td>
                    <td>{{trandetail.accruedcard}}</td>
                    <td>{{trandetail.placeAccrued}}</td>
                    <td>{{trandetail.discountcents}}</td>
                    <td>{{trandetail.shortExpiryDate}}</td>
                </tr>
            </tbody>
        </table>
    </div>

我使用了http://docs.angularjs.org/api/ng.filter:filter中给出的示例,该示例使用输入框进行过滤.在选择给定的卡片时,它似乎过滤得很好.但是,当我选择“全部”时,其值设置为“”,它不会显示所有条目(清除过滤器).但是,在显示的示例中,清除文本框时,将显示所有条目.

我究竟做错了什么？

解决方法

您需要将您的选择更改为：

<select name="show-filter"  ng-model="searchText" ...

代替

<select name="show-filter"  ng-model="searchText.accruedcard" ...

说明：从我所看到的情况来看,使用硬编码选项和ng-options并不常见,这导致了问题.过滤器使用select的模型,该模型当前是一个对象而不是Angular示例中的字符串. Object patterns are okay但是在这种情况下,当选择All时,对象的属性变为null,因为它没有以与其余选项相同的方式连接到选择中.

这是导致searchText过滤器失败的原因,因为它需要有效的字符串(即使使用对象作为匹配模式).

通过对select的模型使用字符串原语,All’hack’被保留,因为它导致select的模型变为(”)而不是null,这将匹配所有内容并显示所有结果.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!