How to filter the json data with radio button using AngularJS?

Question

I am trying to filter json data with various options(like with slider and with some radio buttons). I am failing to filter out with radio buttons as exactly I am not getting any idea how to filter with those ?

With radio button options: if I click: "First Val: >=50", then the table data should be filtered/displayed only for which whose "Value 1" is greater than or equal to 50(>=50) and Similarly for second option: if I click: "Second Val: >=100", then the table data should be filtered/displayed only for which whose "Value 2" is greater than or equal to 100(>=100), but I am unable to get it.

Anyone can help me about it please ? Thanks in advance. Created Fiddle.

html:

<body ng-controller='TestCtrl'>
    <slider floor="0" ceiling="50" ng-model-low="low_marks" ng-model-high="high_marks"></slider>
    low_marks: <strong>{{low_marks}}</strong>
    &nbsp;
    high_marks: <strong>{{high_marks}}</strong>
    <hr>
     <label>>=50<input type="radio" name="value1" ng-model="type" value='value1' ></label><br><br>
 <label>>=100<input type="radio" name="value2" ng-model="type" value='value2' ></label><br><br>
     <table border="1">
      <thead>
        <th>Name</th>
        <th>Low Marks</th>
        <th>High Marks</th>
        <th>Value 1</th>
        <th>Value 2</th>
      </thead>
      <tbody>
        <tr ng-repeat='item in items|filter:marksrange'>
          <td>{{item.name}}</td>
          <td>{{item['minmarks']}}</td>
          <td>{{item['maxmarks']}}</td>
          <td>{{item.value1}}</td>
          <td>{{item.value2}}</td>
        </tr>    
      </tbody>
    </table>
  </body>

js:

var app = angular.module('marks', ['uiSlider']);

app.controller('TestCtrl', function ($scope){
  $scope.items = [{name: "name1", "minmarks": "35",
                  "maxmarks": "100", "value1": "50", "value2": "100"},
                  {name: "name2", "minmarks": "50",
                  "maxmarks": "80", "value1": "100", "value2": "150"},
                  {name: "name3", "minmarks": "70",
                  "maxmarks": "90", "value1": "25", "value2": "50"}];

  $scope.low_marks = 0;
  $scope.high_marks = 100;

  $scope.marksrange = function(item) {
    return (parseInt(item['minmarks']) >= $scope.low_marks && parseInt(item['maxmarks']) <= $scope.high_marks);
  };
});

Seems contrary to how slider works but anyway you aren't checking $scope.type in your filter function — charlietfl
– charlietfl, Commented Jul 5, 2016 at 12:14

developer033 · Accepted Answer · 2016-07-05 14:44:28Z

1

You can use multiple filters to achieve this.

Fiddle

<input type="radio" name="value" ng-model="value1" value='50' >  First Val: >=50<br><br>
<input type="radio" name="value" ng-model="value2" value='100' >  Second Val: >=100<br><br>

<tr ng-repeat='item in items|filter:priceRange|filter:valueRange'>
  <td>{{item.name}}</td>
  <td>{{item['minmarks']}}</td>
  <td>{{item['maxmarks']}}</td>
  <td>{{item.value1}}</td>
  <td>{{item.value2}}</td>
</tr>

Controller:

$scope.valueRange = function(item) {
  if($scope.value1 > 0) {
    return (parseInt(item['value1']) >= $scope.value1);
  }
  else if($scope.value2 > 0) {
    return (parseInt(item['value2']) >= $scope.value2);
  }
  else {
    return item;
  }
};

I have grouped the radio button to select a single button at a time, you can have your own logic there.

edited Jul 5, 2016 at 14:44

developer033

25k8 gold badges85 silver badges113 bronze badges

answered Jul 5, 2016 at 12:23

Deep

9,7962 gold badges24 silver badges34 bronze badges

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

1 Comment

Dhana Over a year ago

Thanks for your reply and sorry for my late response. Yes, It's working as per my expectations. Thanks once again for your help !

Collectives™ on Stack Overflow

How to filter the json data with radio button using AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related