Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – Angular JS ng:基于select选项重复过滤大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我是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,这将匹配所有内容显示所有结果.

大佬总结

以上是大佬教程为你收集整理的angularjs – Angular JS ng:基于select选项重复过滤全部内容,希望文章能够帮你解决angularjs – Angular JS ng:基于select选项重复过滤所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: