这是视图中TH标签的当前部分:

...
    <th>
        <a href="" ng-click="sortReverse = !sortReverse; order('fname',sortReverse)">
        Firstname
        <span ng-show="sortType=='fname' && !sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
        <span ng-show="sortType=='fname' && sortReverse" class="glyphicon glyphicon-triangle-top"></span>
        </a>
    </th>
...


那是我的第一个解决方案,但是不起作用:

<th ng-repeat="tblOpt in tableOptions">
    <a href="" ng-click="sortReverse = !sortReverse; order({{ tblOpt.sortTypeVal }},sortReverse)">
    {{ tblOpt.columnTitle }}
      <span ng-show="sortType=={{ tblOpt.sortTypeVal }} && !sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
      <span ng-show="sortType=={{ tblOpt.sortTypeVal }} && sortReverse" class="glyphicon glyphicon-triangle-top"></span>
    </a>
</th>


Ctrl:

var orderby = $filter('orderBy');

/*Sorting the columns*/
$scope.order = function (sortType, sortReverse) {
  $scope.nameslist = orderby($scope.nameslist, sortType, sortReverse);
};

/*Definition for TH-tags*/
$scope.tableOptions = [
  {
    columnTitle: 'Firstname',
    sortTypeVal: 'fname'
  },
...
]


我想在Ctrl中有说明,在示例中如何查看。字形图标也不会显示在TH标签中。

最佳答案

不需要{{}}ng-click内的ng-show

尝试这个 :

<th ng-repeat="tblOpt in tableOptions">
<a href="" ng-click="sortReverse = !sortReverse; order(tblOpt.sortTypeVal,sortReverse)">
{{ tblOpt.columnTitle }}
  <span ng-show="sortType == (tblOpt.sortTypeVal && !sortReverse)" class="glyphicon glyphicon-triangle-bottom"></span>
  <span ng-show="sortType == (tblOpt.sortTypeVal && sortReverse)" class="glyphicon glyphicon-triangle-top"></span>
</a>

09-25 16:12