影响 ng-class 的 Ng-click

Question

我尝试了一个 5 星评级系统。这是我的代码的简化版本： https://codepen.io/ystaum/pen/NWbLoPO

HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<body ng-app="app">
    <div ng-controller="Controller as ctrl">
      <div ng-repeat="star in ctrl.range" ng-init="rated = star.id">      
        <button ng-repeat="num in [1,2,3,4,5]" ng-class="{'blue':num <= rated}" ng-click="rated = num">{{ num }}</button>   
        </div>
      </body>

CSS：

 .blue{
        background:blue;
    }

JS：

(function () {

    angular
        .module("app", [])
        .controller("Controller", function ($http) {
            var vm = this;
      
            init();

            function init() {
                vm.rating = 3;
                
                vm.range = [{id:4},{ id:5},{id:0},{id:3}];
            };
        });
})();

问题在于，如果您单击任何按钮，则该按钮会“突出显示”（如果之前没有）。我在按钮上设置 ng-class 的方式应该会影响该行中的所有按钮（较低的数字突出显示，较高的数字不突出）。 为什么不这样做？ 如何让它做我想做的事？

已编辑：我使用 var 的原因是为了让 id 值保持一致，并让评分系统显示您在评分中的选择。

Answer 1

你不需要初始化 [rated] var

试试

 <div ng-repeat="star in ctrl.range" >      
        <button ng-repeat="num in [1,2,3,4,5]" ng-class="{'blue':num <= star.id}" ng-click="star.id = num">{{ num }}</button>   
   </div>