可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

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>

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?

回答1:

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

Demo

回答2:

angular.module('myApp', []).controller('candidateCtrl', function($scope) {     $scope.candidates = [         {name:'Goutam',role:'Engineer',country:'India'},         {name:'Carl',role:'Engineer',country:'Sweden'},         {name:'Margareth',role:'Doctor',country:'England'},         {name:'Hege',role:'Engineer',country:'Norway'},         {name:'Joe',role:'Engineer',country:'Denmark'},         {name:'Rathin',role:'Doctor',country:'India'},         {name:'Birgit',role:'Teacher',country:'Denmark'},         {name:'Mary',role:'Engineer',country:'England'},         {name:'Kai',role:'Teacher',country:'Norway'}         ];  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body ng-app="myApp">  <div class="container" ng-controller="candidateCtrl"> <h2>Bootstrap inline Radio Buttons</h2> <div class="row">  <div class="col-lg-4">   <p>Angular JS Filter by Radio Button</p>   <form>     <label class="radio-inline">       <input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer     </label>     <label class="radio-inline">       <input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor     </label>     <label class="radio-inline">       <input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher     </label>   </form>  </div> </div>  <div class="row">  <div class="col-lg-4">      <table class="table table-hover">     <thead>       <tr>         <th>Name</th>         <th>Profession</th>         <th>Country</th>       </tr>     </thead>     <tbody>       <tr ng-repeat="candidate in candidates | filter:searchText:strict">         <td>{{candidate.name}}</td>         <td>{{candidate.role}}</td>         <td>{{candidate.country}}</td>       </tr>     </tbody>   </table>    </div> </div>  </div> </body>

文章来源: AngularJS Filter based on radio selection

标签

radio

angular