javascript - AngularJS基于单选按钮与文本框结合的过滤表

Question

我是 angularjs 的新手，我想在单击一个单选按钮时实现文本框应按特定列过滤表格。当我单击另一个单选按钮时，文本框应按另一列过滤表格。例如，当我单击“sficode”radiobtn 时，文本框会根据 sficode 列过滤表格，当我单击“标题/描述”时，它应根据“描述”列进行过滤.

<div style="width:250px;margin-left: 9px;">
                        <fieldset class="form-group">
                            <legend style="color: #424248;margin-bottom:        0px;">Search</legend>
                            <input type="radio" name="Search" id="rdoSfiCode"                    value="SfiCode" ng-model="filters.x">
                            <label for="rdoSfiCode">SfiCode</label>
                            <input type="radio" style="margin-left:5px;" name="Search" id="rdoTitleDisc" value="TitleDisc" ng-model="filters.y">
                            <label for="rdoTitleDisc">Tile/Discription</label><br>
                            <input type="text" style=" width: 200px;height:     25px;" id="txtSfiorDisc" ng-model="search" />
                        </fieldset>
                    </div>
        <table>
                <tr ng-repeat="corrItem in CorrItems">
                    <td >{{corrItem.SfiCode}}</td>
                    <td>{{corrItem.Tile/Discription}}</td>
</tr>
</table>

这是我的 json 数据:

 $scope.CorrItems=[{"SFICode":"803.025.01","Desc":"Repair coupling of the discharge pump of the Bilge Water Separator"},{"SFICode":"823.125.01","Desc":"pump of the Bilge Water Separator"},]

提前致谢..

Answer 1

我重写了你的部分代码。现在表中的 ng-repeat 看起来像

<tr ng-repeat="corrItem in CorrItems|filter: searchText">
 <td >{{corrItem.SFICode}}</td>
 <td>{{corrItem.Desc}}</td>
</tr>

和searchText过滤器在上面的表单部分定义如下:

<fieldset class="form-group">
  <legend>Search</legend>
  <input type="radio" name="Search" id="rdoSfiCode" value="SFICode" ng-model="radioValue">
  <label for="rdoSfiCode">SfiCode</label>
  <input type="radio" name="Search" id="rdoTitleDisc" value="Desc" ng-model="radioValue">
  <label for="rdoTitleDisc">Title/Discription</label><br>
  <input ng-model="searchText[radioValue]" ng-init="searchText = {}; radioValue='SFICode'" type="text" />
</fieldset>

你可能可以更多地清理你的代码，无论如何坚持我创建的原始代码 this fiddle你可以试试。