1

Angular-UI を使用して評価システムを作成しました。表示される星の数は、max という変数から取得されます。ng-model を使用してこの変数を入力内に表示することはできますが、一度変更すると星の数は変わりません。

このPlunkerで私が何を意味するかがわかります。

関連するjsは次のとおりです。

.directive('myRating', function() {
  return {
    restrict: 'E',
    template: '<div> \
         <div class="row rating" ng-controller="RatingDemoCtrl"> \
           <rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> <a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="editStars = !editStars"></a>\
            <input ng-if="editStars" type="text" class="form-control" ng-model="max" /> \
         </div> \
      </div>',
    replace: true,
  };
});

var RatingDemoCtrl = function ($scope) {
  $scope.rate = 0;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };
};

はng-model毎回最大値を表示するため正しく機能していますが、リアルタイムで変更することはありません。

何か案は？

4

3 に答える 3

1

この問題を簡単に調べたところ、AngularJS Bootstrap Rating ディレクティブがその場で最大値の更新を処理していないようです。

于 2014-03-03T04:10:16.087 に答える
0

私は偶然これのための別のハックを見つけました:

評価ディレクティブを ng-if でラップすることも機能するようです。

<div ng-if="true">
  <rating max="myVar"></rating>
</div>

angular ドキュメントによると、ng-if は各評価で HTML を再挿入し、 の再評価をトリガーしmyVarます。

はい、まだ少しハックですが、更新のたびに上書きされる bower_components-folder のコードを変更するよりもきれいだと思います。

于 2015-03-16T12:29:14.897 に答える