1

他の誰かの時間を節約できることを期待して、何かを共有したかっただけです. 私はこの一見単純な概念にしばらく苦労しましたが、私の特定のニーズに合ったものを見つけることができませんでした.

問題：

私はAngularJSでゲームを構築していました.ng-repeat要素をクリック/タップして、発生するシナリオに基づいて選択するようにユーザーに促します. 永続的なスコア メーター/バーがあります。選択した ng-repeat アイテムのポイント値を使用して計算されたパーセンテージ値に幅をアニメーション化する必要がありました。これは私が jQuery で簡単に行うことに慣れているものですが、Angular はループに陥っていました。

ソリューション：

アニメートしたい要素の ng-style ディレクティブで関数を使用することになりました。その要素 (スコア バー) は index.html にあったため、rootScope も使用しました。

したがって、コントローラーで選択したアイテムのポイント値を取得すると、次のようになります。

$scope.getPoints = function(choice){
    $rootScope.earnedPoints = $rootScope.earnedPoints + choice.point_value;   
};

次のように、パーセンテージを計算し、rootScope のスコア バーをアニメーション化できます。

 $rootScope.maxPoints = 100;
 $rootScope.earnedPoints = 0;
 $rootScope.updatePoints = function(value){
     if($rootScope.earnedPoints <= $rootScope.maxPoints){
         return {'width': ($rootScope.earnedPoints / $rootScope.maxPoints) * 100+'%', 'transition': 'width 1s' , '-webkit-transition': 'width 1s'};
     } else {
          return {'width': 100+'%'};
     }

次に、ビューで、次のように updatePoints 関数が ng-style を介してスコア バー要素に適用されます。

<div class="scoreBarInside" ng-style="updatePoints(value)"></div>

そのため、選択肢がクリック/タップされると、パーセンテージが計算され、そのパーセンテージに従ってスコア バーがアニメーション化されます。

これがフィドルです：http://jsfiddle.net/bjDesign/0mLksrym/18/

誰かがより良い解決策を持っているなら、私はそれを見たいです。私は本当にAngularをたくさん掘り下げています... jQueryを使用してクライアントに提供したいUIで動きのような流動性を実現する方法を理解するのに苦労しているように見えることがあります。

4

0 に答える 0