基於無線電選擇的AngularJS過濾器

我正在實現一個搜索輸入框，該框應根據要迭代的對象的特定屬性進行搜索，我希望使用單選按鈕選擇它們。基於無線電選擇的AngularJS過濾器

例如這裏是我的代碼：

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

正如你所看到的，我目前基於濾波掉在我的數組的客戶名稱字段。但是，我想更改邏輯，以便可以使用單選按鈕在客戶名稱，主題，類型和日期之間進行選擇。因此，如果用戶單擊Date單選按鈕，則searchText將僅基於Date屬性進行過濾。獲得此功能的最佳方式是什麼？

來源

2014-06-13 Matt Hintzke

創建一組共享相同ng-model值的單選按鈕。使用該值來設置按鍵上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

來源

2014-06-13 18:08:43

你是聖人。非常感謝你 –

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>

來源

2017-11-16 07:03:14 GoutamS

基於無線電選擇的AngularJS過濾器

回答

相關問題