AngularJS Filter基于无线电选择

发布时间：2020-12-17 17:49:04 所属栏目：安全来源：网络整理

导读：我正在实现一个搜索输入框,它应该基于迭代的对象的某个属性进行搜索,我希望使用单选按钮来选择它们. 例如,这是我的代码： span style="margin-bottom: 10px; display: inline-block;"Search: input ng-model="searchText.CustomerName" / /span table id="Ta

我正在实现一个搜索输入框,它应该基于迭代的对象的某个属性进行搜索,我希望使用单选按钮来选择它们.

例如,这是我的代码：

<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之间进行选择.因此,如果用户单击“日期”单选按钮,则searchText将仅基于“日期”属性进行过滤.获得此功能的最佳方法是什么？

解决方法

创建一组共享相同ng模型值的单选按钮.使用该值在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

Demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!