目的：使按鈕在兩種狀態之間切換，注意：簡單的通過.修改focus和active的樣式是做不到的。

效果圖：

html程式碼：

 <div class="col-1">
   <button class="orderByTime" ng-click="changeDirection()">時間
   <img class="down" src="/onlyofficeeditor/images/paperList/down.png">//最開始顯示
   <img class="up noDisplay" src="/onlyofficeeditor/images/paperList/up.png"
 
></button>//最開始隱藏
</div>

js程式碼：

function paperListCtrl($scope, $http) {
    $scope.changeDirection = function() {
        if ($(".orderByTime").hasClass("my-btn-blue2")){//如果按鈕是藍色
            $(".orderByTime").removeClass("my-btn-blue2");//把藍色去掉
            $(".up").addClass("noDisplay"
 
);//不顯示向上的箭頭
            $(".down").removeClass("noDisplay");//顯示向下的箭頭
        }else{//如果按鈕不是藍色
            $(".orderByTime").addClass("my-btn-blue2");//把藍色加上
            $(".down").addClass("noDisplay");//不顯示向下的箭頭
            $(".up").removeClass("noDisplay");//顯示向上的箭頭
        }

    }
}

css程式碼：

.orderByTime
 
{
  border: none;
  white-space:nowrap; /* 不換行 */
  margin-top: 2px;
}

button:focus {
    outline: none;/* 沒有邊框 */
}

.noDisplay{
  display: none; /* 隱藏*/
}