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