AngularJS Filter based on radio selection

Question

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?

Marc Kline · Accepted Answer · 2014-06-13 18:08:43Z

6

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

answered Jun 13, 2014 at 18:08

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GoutamS · Accepted Answer · 2017-11-16 07:03:14Z

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>

Collectives™ on Stack Overflow

AngularJS Filter based on radio selection

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related