AngularJS过滤器基于无线电选择 [英] AngularJS Filter based on radio selection

问题描述

我实现了应搜索基于关闭该越来越迭代的，我想他们的对象的某个属性的搜索输入框使用单选按钮来选择。

I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.

例如这里是我的code：

For example here is my code:

<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>

正如你所看到的，我目前基于滤波关在我的数组的客户名称字段。不过，我想改变的逻辑，这样我可以用一个单选按钮，客户名称，主题，类型和日期之间进行选择。因此，如果用户点击了日期单选按钮，则SEARCHTEXT将仅基于该日期属性进行过滤。是什么让这个功能的最佳方式？

As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?

推荐答案

创建一组共享相同的 NG-模型价值单选按钮。使用该值设置在键 SEARCHTEXT ：

Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:

<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

演示

这篇关于AngularJS过滤器基于无线电选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！