我正在实现一个搜索输入框,它应该基于迭代的对象的某个属性进行搜索,我希望使用单选按钮来选择它们.
例如,这是我的代码：
<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
