Angular JS ng:基于select选项重复过滤

Question

我是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中给出的示例,该示例使用输入框进行过滤.在选择给定的卡片时,它似乎过滤得很好.但是,当我选择"全部"时,其值设置为"",它不会显示所有条目(清除过滤器).但是,在显示的示例中,清除文本框时,将显示所有条目.

我究竟做错了什么？

Answer 1

您需要将选择更改为：

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

代替

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

说明：从我所见，将硬编码选项与ng-options一起使用并不常见，这导致了问题。过滤器使用选择模型，该模型当前是对象而不是Angular示例中的字符串。对象模式是可以的，但是在这种情况下，null选择“全部”时对象的属性将变为可用，因为它的连接方式与其余选项不同。

这是导致searchText过滤器失败的原因，因为它需要有效的字符串（即使将对象用于匹配模式）也是如此。

通过为选择模型使用字符串原语，将保留所有“ hack”，因为这会导致选择模型变为（''）而不是null，这将匹配所有内容并显示所有结果。