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并不常见，这导致了这个问题。过滤器使用select模型，该模型当前是一个对象而不是Angular示例中的字符串。 Object patterns are okay但在这种情况下，当选择全部时，对象的属性将变为null，因为它没有以与其他选项相同的方式连接到选择中。

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

通过为select模型使用字符串原语，All＆＃39; hack＆＃39;保留，因为它导致select模型变为（''）而不是null，这将匹配所有内容并显示所有结果。

Answer 2

我遇到了同样的问题。我修复它的方法是在过滤器中使用.toString()。

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

2 个答案: