基于单选的AngularJS过滤器

Question

我正在实现一个搜索输入框，它应该根据正在迭代的对象的某个属性进行搜索，我希望使用单选按钮选择它们。

例如这里是我的代码:

<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span> 

    <table id="Table1" class="alertTable">
        <thead>
            <tr>
                <th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
                <th>Subject</th>
                <th>Customer</th>
                <th>Type</th>
                <th>Date</th>
                <th class="smCol">Actions</th>
            </tr>
        </thead>
        <tbody id="tbAlerts">
            <tr ng-repeat-start="alert in alerts | filter:searchText"  > <!-- | filter:searchText -->
                <td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
                <td><a href="Show Alert Details" ng-click="showAlertDetails($event)">{{ alert.Summary }}</a></td>
                <td>{{ alert.CustomerName }}</td>
                <td>{{ alert.CreatedDate }}</td>
                <td>{{ alert.Category }}</td>
                <td>
                    <!-- Tricky little widget logic -->

                </td>
            </tr>
            <tr ng-repeat-end class="alertDetail">
                <td></td>
                <td colspan="5" ng-bind-html="alert.Details"></td>
            </tr>
        </tbody>
    </table>

如您所见，我目前正在根据数组中的 CustomerName 字段进行过滤。但是，我想更改逻辑，以便可以使用单选按钮在 CustomerName、Subject、Type 和 Date 之间进行选择。因此，如果用户单击 Date 单选按钮，则 searchText 将仅根据 Date 属性进行过滤。获得此功能的最佳方法是什么？

Answer 1

创建一组共享相同的单选按钮 ng-model值(value)。使用该值在 searchText 上设置 key :

<span style="margin-bottom: 10px; display: inline-block;">Search:
    <input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
    selectedSearch='CustomerName'" />
</span> 

<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category

Demo