Question

所有

这可能是一个老问题，但我找不到一个简单的答案：

我想要的是设计一个5星等级的小部件，用户鼠标悬停/点击一个星，以及它前面的所有星（和它自己）突出显示，如果用户没有点击星并移出，它将只是保持以前的等级否则，改变排名。我想知道如何实现这个AngularJS？

<vp-rank></vp-rank>


<script type="text/ng-template" id="#ranktmplate">
    <div class="rank">
        <img class="star" ng-repeat="s in [1,2,3,4,5] track by $index" ng-src="{{getStar(s)}}" ng-mouseover="changeRank(s)">
    </div>
</script>

（函数（）{

        var app = angular.module("vp", []);
        app.directive("vpRank", function(){
            return {
                restrict: "AE",
                scope:{},
                templateUrl: "#ranktmplate",
                controller: function($scope){
                    $scope.rank = 1;
                    $scope.getStar = function(idx){
                        return +idx<=$scope.rank?"public/images/star.png":"public/images/star_blnk.png";
                    }
                    $scope.changeRank = function(rnk){
                        $scope.rank = rnk;
                    }
                },
                link: function(scope, EL, attrs){

                }
            };
        });

    })();

目前，该指令可以根据用户鼠标突出显示，我不知道如果使用没有点击和鼠标移动，如何实现保留以前的等级。

由于

如何在AngularJS中制作排名小部件

0 个答案: