这是定义了箭头的表格标题的 HTML 片段视图此图像显示了列中的箭头位置
<!--This is controller CODE which contains object details which is populating the code and function for sort.-->
$scope.all_columns = ["RAG Status","Status","Bundle ID","Bundle Name", "#of orders","# of closed orders","Actions"];
$scope.options1 = ["1","5","10","15"];
$scope.bundles = {
RAGStatus: "",
Status: "",
BundleID: "",
BundleName: "",
ofOrders: "",
ofClosedOrders: "",
Actions: ""
}
$scope.toggleCustom = function() {
$scope.custom = !$scope.custom;
};
$scope.dataSort = function(predicate){
//$scope.predicate = predicate;
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
$scope.toggleCustom();
<th><input type="checkbox" ng-model="allItemsSelected" ng-change="selectAll()">Select All
</th>
</label>
<th>{{ all_columns[0]}} <span ng-if="!custom" ng-click="dataSort('RAGStatus')"><img class="img"
ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('RAGStatus')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[1]}} <span ng-if="!custom" ng-click="dataSort('Status')"><img class="img"
ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('Status')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[2]}} <span ng-if="!custom" ng-click="dataSort('BundleID')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('BundleID')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span>
</th>
<th>{{ all_columns[3]}}  <span ng-if="!custom" ng-click="dataSort('BundleName')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('BundleName')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[4]}} <span ng-if="!custom" ng-click="dataSort('ofOrders')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('ofOrders')"><img class="img"
ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[5]}} <span ng-if="!custom" ng-click="dataSort('ofClosedOrders')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('ofClosedOrders')"><img class="img"
ng-src="resources/images/up-black-arrow.png">
</span></th>
<th>{{ all_columns[6]}}  <span ng-if="!custom" ng-click="dataSort('Actions')"><img
class="img" ng-src="resources/images/down-black-arrow.png"> </span>
<span ng-show="custom" ng-click="dataSort('Actions')"><img class="img" ng-src="resources/images/up-black-arrow.png">
</span></th>
这是控制器代码,其中包含填充代码和函数以进行排序的对象详细信息。
因此,我试图单击特定列以对该列进行排序,其图像(箭头)正在更改,这是可以接受的,但其他列的图像(箭头)也在更改,这是不可接受的,并且它正在更改,因为我使用了相同的切换布尔变量(自定义)。