Question

以下是视图中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>

控制：

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中有如何在示例中看到上面的说明。此外，glyphicons也不会显示在TH-Tags中。

Answer 1

{{}}或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>

使用AngularJS中的ngRepeat减少TH-Tags

1 个答案: