How to sort a table by difference of two columns using AngularJS and not in a query clause?

Question

Here is some of the code. I just posted the main html table an i need to know how to sort my table (the fields: vote_value AND vote_dismissed_value).

the sort need to be the following: order by vote_value - vote_dismissed_value .

how to do it ? using AngularJS and not using sql query clause.

thanks

table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}
table.gridtable th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table.gridtable td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

the html table that needs to be sorted
<div>
  <table class="gridtable" ng-show="entity.currentFilter.id">
    <tbody>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Vote Value</th>
        <th>Vote Dismissed Value</th>
        <th>Vote Total</th>
        <th>is Winner</th>
      </tr>
      <!-- NNN Angular repeat -->
      <tr ng-repeat="element in entity.currentPage.items | orderBy:['-vote_value']">
        <td>{{ tag.ng("$index + 1") }}</td>
        <td>{{ tag.ng("element.name") }}</td>
        <td class="text-danger">{{ tag.ng("element.vote_value") }}</td>
        <td class="text-warning">{{ tag.ng("element.vote_dismissed_value") }}</td>
        <td class="text-success">{{ tag.ng("element.vote_value - element.vote_dismissed_value") }}</td>
        <td>
          <div class="iphone-toggle-buttons">
            <label>
              <input type="checkbox" ng-model="element.state_win" ng-true-value="1" ng-false-value="0" ng-change="updateCurrentCompetitorState(element)">
              <span> 
                                                </span>
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Ok so I figured it out...

the answer that worked to me was changing the orderBy statment. like so:

<table class="table" ng-show="entity.currentFilter.id">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Vote Value</th>
      <th>Vote Dismissed Value</th>
      <th>Vote Total</th>
      <th>is Winner</th>
    </tr>
  </thead>
  <tbody>
    <!-- NNN Angular repeat -->
    <tr ng-repeat="element in entity.currentPage.items | orderBy:myCustomSortFunction:true">
      <td>{{ tag.ng("$index + 1") }}</td>
      <td>{{ tag.ng("element.name") }}</td>
      <td class="text-danger">{{ tag.ng("element.vote_value") }}</td>
      <td class="text-warning">{{ tag.ng("element.vote_dismissed_value") }}</td>
      <td class="text-success">{{ tag.ng("element.vote_value - element.vote_dismissed_value") }}</td>
      <td>
        <div class="iphone-toggle-buttons">
          <label>
            <input type="checkbox" ng-model="element.state_win" ng-true-value="1" ng-false-value="0" ng-change="updateCurrentCompetitorState(element)">
            <span> 
                                                </span>
          </label>
        </div>
      </td>
    </tr>
  </tbody>
</table>

before: orderBy:['-vote_value'] AND after: orderBy:myCustomSortFunction:true

and the javascript function is:

$scope.myCustomSortFunction = function(Element) {
  return Element.vote_value - Element.vote_dismissed_value;
}

working jsFiddle the answer was found here

How to sort a table by difference of two columns using AngularJS and not in a query clause?

1 Answers1