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 很多......有时似乎很难弄清楚如何在 UI 中实现我喜欢使用 jQuery 为我的客户提供的那种流动性。

4

0 回答 0