Javascript 在AngularJS中切换自定义排序图标

我一直在尝试在angular js中放置一个自定义网格样式和排序图标，到目前为止，除了切换排序图标外，我也成功地做到了这一点

这是我的html标题代码

<div ng-app="myApp">
    <div ng-controller="TableCtrl">

        <table class="MmTable">
            <thead class="TblRow HeaderRow">
                <tr>
                    <th class="TblHeader TblHeaderSortable SortIndex0 Column0" style="text-align: left;">
                        <i ng-click="sort('Subsidiary',$event)" class="SortDesc">
                            Subsidiary
                            <span class="{{Header[0]}}"></span>
                        </i>

                    </th></theah></table>

在上面的代码中，我试图操纵dom，但发现在Angular中无法做到这一点。 所以，我也尝试过witg-ng风格，但没有成功。

---

在切换排序图标时需要一些帮助，因为我想为asc和desc排序设置自定义类

一个解决方案是在您的范围内保留一个布尔变量，比如sortAscending=“true”，当您按描述顺序排序时，将值更改为false

在html中，您可以使用如下内容

ng-class="sortAscending ?'ascClass':'desClass'"

工作示例：

使用切换按钮添加新的工作示例

您可以像这样切换一些图标

HTML:

---

.

仍然不是给出lexixal错误的正确方法如果我喜欢这个ng类=“{'SortAsc'：sortAscending（）}”，那么它是一个很好的但会导致问题的三元运算符。您可能有混合的单引号/双引号，请参考一个工作示例，将true更改为false以查看更改我的代码段仍然存在词法错误。您可以为此创建一个JSFIDLE吗？让我们来看看。

ng-class="sortAscending ?'ascClass':'desClass'"

<tr ng-controller="toggleController as tc">
  <th ng-click="tc.toggle('name')">Name
    <i ng-class="tc.nameDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i>
  </th>
  <th ng-click="tc.toggle('date')">Date
    <i ng-class="tc.dateDesc ? 'fa fa-toggle-down' : 'fa fa-toggle-up'"></i>
  </th>
</tr>

angular.module("toggleApp", []).controller('toggleController', function () {
  this.toggle = function (property) {
    this.nameDesc = (property === 'name') ? !this.nameDesc : this.nameDesc;
    this.dateDesc = (property === 'date') ? !this.dateDesc : this.dateDesc;
  }
});