라디오 선택을 기준으로 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>

, 나는 현재 나의 배열의 CUSTOMERNAME 필드의 기반으로 필터링하고 있습니다 : 예를 들어

여기 내 코드입니다. 그러나 나는 CustomerName, Subject, Type 및 Date 중에서 라디오 단추를 사용하여 선택할 수 있도록 논리를 변경하려고합니다. 따라서 사용자가 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 필터

답변

관련 문제