CODEWITHSUNDEEP
javascriptangularjscheckboxangularjs-filter
user3056158
user3056158

Reputation: 719

How to apply filter on data of table records in descending order using checkbox in Angular Js

i am trying to implement search records depends on drop-down and also want to apply records in descending order using checkbox but my checkbox is not working when i am click on it.

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

<h1>Search Filter aesc/desc</h1>

<select ng-model="strcolumn">
    <option value="sname">NAME</option>
    <option value="course">COURSE</option>
    <option value="fee">FEE</option>
</select>

<input type="checkbox" name = "isReverse" ng-model="isReverse">

<table border="2px solid green" ng-controller="stuCtrl">
<tr>
<td>NAME</td>
<td>COURSE</td>
<td>FEE</td>
</tr>

<tr ng-repeat="item in ar | orderBy:strcolumn : isReverse ">
<td>{{item.sname|uppercase}}</td>
<td>{{item.course}}</td>
<td>{{item.fee|currency}}</td>
</tr>
</table>

Upvotes: 1

Views: 139

Answers (1)

SkyWriter
SkyWriter

Reputation: 1479

I guess the problem you're facing is that both your dropdown and checkbox are in a different controller (if any at all?). Notice how you're attaching stuCtrl to a <table> element, leaving inputs out of it?

What I did is wrapped your whole code with a <div> and moved the controller declaration there. Here's a working example at CodePen: http://codepen.io/anon/pen/JdQLWW.

The code would look like this:

<div ng-controller="stuCtrl">
  <h1>Search Filter aesc/desc</h1>

  <select ng-model="strcolumn">
    <option value="sname">NAME</option>
    <option value="course">COURSE</option>
    <option value="fee">FEE</option>
  </select>

  <input type="checkbox" name="isReverse" ng-model="isReverse">

  <table border="2px solid green">
    <tr>
      <td>NAME</td>
      <td>COURSE</td>
      <td>FEE</td>
    </tr>

    <tr ng-repeat="item in ar | orderBy:strcolumn : isReverse ">
      <td>{{item.sname|uppercase}}</td>
      <td>{{item.course}}</td>
      <td>{{item.fee|currency}}</td>
    </tr>
  </table>
</div>

Hope this helps!

Upvotes: 1

Related Questions