0

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 値の一貫性を維持し、評価システムに評価の選択を表示させるためでした。

4

1 に答える 1