如何使用AngularJS而不是在查询子句中根据两列的差异对表进行排序


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

下面是一些代码。我刚刚发布了主html表我需要知道如何对我的表进行排序(字段:vote_value AND vote_dismised_value)。

排序需要如下:按vote_value排序-votedistissed_value。

怎么做?使用AngularJS而不使用sql查询子句。

感谢

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>

好吧,我想好了。。。

对我来说,有效的答案是改变排序。像这样:

<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

javascript函数为:

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

工作jsFiddle答案在这里找到