表列排序和图像切换

Question

这是HTML代码段 使用定义的This image shows the arrow postion in the columns

箭头查看表格标题

<!--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]}}&nbsp<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]}}&nbsp<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]}}&nbsp<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]}}&nbsp <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]}}&nbsp<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]}}&nbsp<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]}}&nbsp <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>

这是控制器CODE，它包含填充代码和函数以进行排序的对象详细信息。

所以我试图点击特定列来排序该列，其图像（箭头）正在改变，这是可以接受的，但其他列的图像（箭头）也在改变，这是不可接受的，并且它正在改变，如切换我使用了相同的bollean vaiable（自定义）。