angularJsでボタンを点滅させる方法

Question

私はangularJs SPAアプリケーションを開発中です。私のフロントエンドのhtmlページには、操作が完了するのを待つためのボタンがクリックされています。操作が進行中であることをユーザーに通知したい。操作が完了するまで、私は、ボタンまたはボタン上のテキストを点滅させること、または人々が与えられたシナリオのために使用しているかもしれない他のアプローチを考えています。 私は、ボタン上にスピナーのような提案や正しい状態を伝えるものがあれば公開しています。

Answer 1

これはブール変数で実現できます。例えばのために

：

$scope.inProgress = false; 
$scope.someAction = someAction; 

function someAction(){ 
    $scope.inProgress = true; 

    //action here 
    //on result 
    $scope.inProgress = false; 
} 

操作が完了した後は、falseに変数を設定します。いくつかのスタイル

button{ 
    padding:5px; 
} 
button span{ 
    margin-left: 10px; 
} 
.glyphicon-spin { 
    -webkit-animation: spin 1000ms infinite linear; 
    animation: spin 1000ms infinite linear; 
} 
@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 
@keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); 
     transform: rotate(0deg); 
    } 
    100% { 
     -webkit-transform: rotate(359deg); 
     transform: rotate(359deg); 
    } 
} 

を追加するHTML

<button> 
     <span ng-if="!inProgress"> 
     Submit 
     </span> 
     <span ng-if="inProgress"> 
     In progress 
     <i class="glyphicon glyphicon-refresh glyphicon-spin"></i> 
     </span> 
    </button> 

で

それは、ボタン内部の回転効果を作成します。自分でカスタマイズすることができます。